How to create fully controlled dropdown in semantic-ui-react

Question

I want to create a fully controlled dropdown in order to use react-window to show really long list of items in it.

I've checked docs, and there is no any example of controlled dropdown with Dropdown.Item specified.

This is how my component looks like:

<Dropdown
  placeholder="Filter Posts"
  clearable={true}
  search={true}
  onChange={this.handleChange}
  text={tagOptions[1].value}
  value={tagOptions[1].value}
  onSearchChange={this.handleChange}
>
  <Dropdown.Menu>
    {tagOptions.map(option => (
      <Dropdown.Item key={option.value} {...option} onClick={this.handleItemClick} />
    ))}
  </Dropdown.Menu>
</Dropdown>;

I've encounter with 2 issues:

Initial value is not appears, I dig into the code, and saw that if i don't pass options property it won't find the given value, therefore, it will not be shown. I can use the text property, but it seems like a hack.
I need to implement handleItemClick by myself, and I see that there is logic in the original handleItemClick.

Any suggestions? did I missed something here?

felixmosh · Accepted Answer · 2019-03-24 18:12:21Z

3

I've able to hack it around with using ref on the dropdown and passing the original handleItemClick method.

The only downside for now is that keyboard nav is not works :\

Seem like it was not designed to be fully controlled.

https://codesandbox.io/s/ql3q086l5q

answered Mar 24, 2019 at 18:12

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike · Accepted Answer · 2020-09-29 12:35:35Z

The dropdown module simply doesn't have support for controlling it's inner components, that being said this is the closest I've gotten to a controlled dropdown with react-window support. I'm posting it here for anyone in the future that wants a select dropdown with virtualisation without a headache.

VirtualisedDropdown.js

import React, { forwardRef, useCallback, useRef, useState } from "react"
import { Dropdown, Ref } from "semantic-ui-react"
import { FixedSizeList } from "react-window"
import "./VirtualisedDropdown.scss"

const SUI_DROPDOWN_MENU_HEIGHT = 300
const SUI_DROPDOWN_MENU_ITEM_HEIGHT = 37

const VirtualisedDropdown = ({
  options, value,
  ...restProps
}) => {
  const dropdownRef = useRef()
  const listRef = useRef()

  const [open, setOpen] = useState(false)

  const OuterDiv = useCallback(({ style, ...props }, ref) => {
    const { position, overflow, ...restStyle } = style
    return (
      <Ref innerRef={ref}>
        <Dropdown.Menu open={open} {...props} style={restStyle}>
          {props.children}
        </Dropdown.Menu>
      </Ref>
    )
  }, [open])

  const InnerDiv = useCallback(props => {
    return (
      <Dropdown.Menu className="inner" open={open} style={{ ...props.style, maxHeight: props.style.height }}>
        {props.children}
      </Dropdown.Menu>
    )
  }, [open])

  return (
    <Dropdown
      className="virtualised selection"
      onClose={() => setOpen(false)}
      onOpen={() => {
        setOpen(true)
        listRef.current.scrollToItem(options.findIndex(i => i.value === value))
      }}
      // This causes "Warning: Failed prop type: Prop `children` in `Dropdown` conflicts with props: `options`. They cannot be defined together, choose one or the other."
      // but is necessary for some logic to work e.g. the selected item text.
      options={options}
      ref={dropdownRef}
      selectOnNavigation={false}
      value={value}
      {...restProps}
    >
      <FixedSizeList
        height={options.length * SUI_DROPDOWN_MENU_ITEM_HEIGHT < SUI_DROPDOWN_MENU_HEIGHT ? options.length * SUI_DROPDOWN_MENU_ITEM_HEIGHT + 1 : SUI_DROPDOWN_MENU_HEIGHT}
        innerElementType={InnerDiv}
        itemCount={options.length}
        itemData={{
          options,
          handleClick: (_e, x) => dropdownRef.current.handleItemClick(_e, x),
          selectedIndex: options.findIndex(i => i.value === value),
        }}
        itemSize={SUI_DROPDOWN_MENU_ITEM_HEIGHT}
        outerElementType={forwardRef(OuterDiv)}
        ref={listRef}
      >
        {Row}
      </FixedSizeList>
    </Dropdown>
  )
}

const Row = ({ index, style, data }) => {
  const { options, handleClick, selectedIndex } = data
  const item = options[index]

  return (
    <Dropdown.Item
      active={index === selectedIndex}
      className="ellipsis"
      key={item.value}
      onClick={handleClick}
      selected={index === selectedIndex}
      style={style}
      title={item.text}
      {...item}
    />
  )
}

export default VirtualisedDropdown

VirtualisedDropdown.scss

.ui.dropdown.virtualised .menu {
  &.inner {
    margin: 0 -1px !important;
    left: 0;
    overflow: initial;
    border-radius: 0 !important;
    border: 0;
  }

  > .item {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

James Delaney · Accepted Answer · 2019-03-24 17:37:14Z

1

To solve first problem remove clearable={true} and text={tagOptions[1].value}
What handleItemClick function should do?

answered Mar 24, 2019 at 17:37

James Delaney

1,8042 gold badges22 silver badges38 bronze badges

2 Comments

James Delaney Over a year ago

Cansole log tagOptions[1]. to check did you get there any value. {console.log('tagOptions[1].value', tagOptions[1].value)}

felixmosh Over a year ago

Yes, You can play with this sandBox codesandbox.io/s/ql3q086l5q

Collectives™ on Stack Overflow

How to create fully controlled dropdown in semantic-ui-react

3 Answers 3

Comments

VirtualisedDropdown.js

VirtualisedDropdown.scss

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

VirtualisedDropdown.js

VirtualisedDropdown.scss

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related