Semantic-ui-react: Dropdown: Cannot read property 'disabled' of undefined

[stelioschar]

This is reproducible in dropdown multiple search selection

Steps

1. Go to dropdown multiple search selection
2. Type "afghanistan"
3. Press "Enter" - "Afghanistan" has been selected
4. Press "Up"(or "Down") arrow then an error Cannot read property 'disabled' of undefined appears in console.

This first came up to my local project and I reproduced in demo. This happens everytime you type to step 2 the first item of the list. E.g if you have the below list, you need to type "Angular"

• Angular
• Ember
• React

This is also reproducible with or without the flag option.

Expected Result

After step 4 I expected to navigate up & down and be able to select another option.

Actual Result

JS error and cannot proceed with the selection of extra options.

Version

0.75.1

[crauadams]

This bug already solved ? I'm facing this too, i would like to help to solve this, how can i help?

[sudheerDev]

@stelioschar I cannot replicate this on latest release can u cross check this once?

[stelioschar]

@sudheerDev yes. You can go here https://react.semantic-ui.com/modules/dropdown#dropdown-example-multiple-search-selection
The key is that you need to type as many keys as only one option is filtered.

1. Type "greec"
2. Select "Greece" then once "Greece" is selected
3. Press Up/Down key

[sudheerDev]

@stelioschar Thanks i will give this a shot

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[stale[bot]]

This issue will be closed due to lack of activity for 6 months. If you’d like this to be reopened, just leave a comment; we do monitor them!

[afalahi]

I'm having this issue with the following code

import React from 'react';
import { Form, Item } from 'semantic-ui-react';


const DropDown = ({options, selectedColor, onSelectedColorChange}) =>{
  const renderedOptions = options.map( (option) =>{
    if (option.value === selectedColor.value) {
      return null;
    }
    return (
      <Item 
        key={option.value}
        onClick={() => onSelectedColorChange(option)}
      >
        {option.label}
      </Item>
    )
  });

  return (
    <Form>
      <Form.Dropdown 
        label='Select a Color'
        selection
        options={renderedOptions}
        className='active visible' text={selectedColor.label}
      />
    </Form>
  )
}

export default DropDown

I'm basically trying to remove a currently selected item from the list displayed by the drop-down, and getting the same error

Update:
I changed the code to use the DropDown component instead of the Form.Dropdown and i get the same error

import React from 'react';
import { Form, Item, Dropdown } from 'semantic-ui-react';


const DropDownSelection = ({options, selectedColor, onSelectedColorChange}) =>{
  const renderedOptions = options.map( (option) =>{
    if (option.value === selectedColor.value) {
      return null;
    }
    return (
      <Item 
        key={option.value}
        onClick={() => onSelectedColorChange(option)}
      >
        {option.label}
      </Item>
    )
  });

  return (
    <Dropdown
      placeholder='Select a color'
      text={selectedColor.label}
      options={renderedOptions}
      selection
    />
    // <Form>
    //   <Form.Dropdown 
    //     label='Select a Color'
    //     selection
    //     options={renderedOptions}
    //     className='active visible' text={selectedColor.label}
    //   />
    // </Form>
  )
}

export default DropDownSelection

[layershifter]

@afalahi it throws because you're returning null in renderedOptions, I suggest to modify code to filter our falsy values:

const renderedOptions = options
  .map(option => {
    if (option.value === selectedColor.value) {
      return null;
    }
    return (
      <Item key={option.value} onClick={() => onSelectedColorChange(option)}>
        {option.label}
      </Item>
    );
  })
  .filter(Boolean);