# \[Bug\] disabled in select option does not work

**URL:** <https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270>\
**Category:** Photoshop\
**Tags:** ui, bug, feature-request, uxp, spectrum\
**Created:** [November 25, 2020, 2:07pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270 "2020-11-25T14:07:29Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [November 25, 2020, 2:07pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/1 "2020-11-25T14:07:29Z")

</div>

For native select elements, setting the disabled attribute on an option has no effect:

```
<select>
<option disabled>...</option>
</select>

```

Btw, is the forum the right place to submit such bugs? I thought about creating issues on github, but there are only repos dedicated to either the documentation or the examples, so I didn’t think it would fit there.

---

<div class="post-metadata">

**Author:** ![grebesoft\_ben](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/grebesoft_ben/32/1017_2.png) [@grebesoft\_ben](https://forums.creativeclouddeveloper.com/u/grebesoft_ben)\
**Post date:** [November 27, 2020, 8:56am UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/2 "2020-11-27T08:56:38Z")

</div>

Just to piggyback on this, I’ve also found that the “multiple” attribute on native select elements doesn’t work.

```auto
<select name="cars" id="cars" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
</select>

```

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [November 30, 2020, 3:15pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/3 "2020-11-30T15:15:38Z")

</div>

The HTML `<select>` does not support `disabled` or `multiple`. If you need this functionality, please use `sp-dropdown`, which supports both features.

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [March 9, 2021, 10:37am UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/4 "2021-03-09T10:37:55Z")

</div>

Hint for everyone: the `multiple` property has to go on the sp-menu, not the sp-dropdown.

Also, @kerrishotts , is there any way of keeping the dropdown opened, when selecting multiple items?  
Feels like bad UX when the user has to open the dropdown 10 times to select 10 items. Maybe the component should listen for CTRL or meta-key press inside.

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [March 9, 2021, 3:34pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/5 "2021-03-09T15:34:28Z")

</div>

The whole multiple-dropdown thing took me a while to figure out correctly, so I’ll quickly share my learnings here for anyone else running into these issues.  
I’m still getting a bit confused by the fact that Spectrum is praised and recommended to be used while there’s so little documentation on it (the actual UXP implementation) that we kind of have to fish in muddy waters.

Anyways, the UXP examples show the use of `onChange(evt => console.log(evt.target.selectedIndex)` to retrieve the index of the selected item. For multiple selectable options (sp-menu-items), this doesn’t help a lot as it always returns the index of the first selected option.

Logging` evt.target. __proto__ ` finally gave me an idea of which properties the sp-dropdown object actually has:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/f/f67a0a33c85d83b7561ddb4eb08bcc366528f8b8.png)

So at least there’s a getter called `selectedOptions`, which returns the sp-menu-item elements whose values we can the retrieve and parse.

If you’re using React, you’re probably storing selected options in some kind of state. In my case it looks like this:

```
const state = {
  someObj: {
    a: false,
    b: false,
    c: false,
  }
}

```

This results in a setup like the following:

```
<WC onChange={e => {
  const selectedKeys = e.target.selectedOptions.map(({value}) => value)
  const updated = Object.keys(this.state.someObj).reduce((obj,key) => ({...obj, [key]:selectedKeys.includes(key)}),{});
  this.setState({someObj: updated})
}}>
  <sp-dropdown placeholder="Make a selection...">
    <sp-menu multiple slot="options">
      {
        Object.keys(this.state.someObj).map(key => {
          return <sp-menu-item selected={this.state.someObj[key] ? true : null} key={key} value={key}>{key}</sp-menu-item>
        })
      }
    </sp-menu>
  </sp-dropdown>
</WC>

```

* * *

However, if your state looks more like that (using arrays)…

```
const state = {
  options: ["a", "b", "c"],
  selectedOptions: [],
}

```

… the setup would probably be similar to:

```
<WC onChange={e => {
  const selectedOptions = e.target.selectedOptions.map(({value}) => value)
  this.setState({selectedOptions})
}}>
  <sp-dropdown placeholder="Make a selection...">
    <sp-menu multiple slot="options">
      {
        this.state.options.map(opt => {
          return <sp-menu-item selected={this.state.selectedOptions.includes(opt) ? true : null} key={opt} value={opt}>{opt}</sp-menu-item>
        })
      }
    </sp-menu>
  </sp-dropdown>
</WC>

```

* * *

* * *

**So far so good, but there’s still a problem:**

The `selected` property of a sp-menu-item seems to have been designed for non-multiple sp-menus only. It overwrites the current selected value so that there’s always just one selected item at a time, which prevents me from prefilling the dropdown with the initial values.

**One more thought:**  
Maybe the sp-dropdown / sp-menu should expose more events than just a `change` event? If it provided a more specific `onSelect(opt)`, state updates would be a lot easier as only the single changed option would have to be updated.

**Edit: Another thing I just noticed:**  
When there’s more than one option selected, the dropdown text will only display the first selected options name. From a usability point of view that’s quite problematic as the user has no visual feedback of what’s selected and if his selection worked, other than reopening the dropdown to double-check. Commonly it should show something like “Option1, Option2” or “2 Selected”.

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [April 17, 2021, 6:42pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/6 "2021-04-17T18:42:26Z")

</div>

> [@simonhenke](#):
>
> **So far so good, but there’s still a problem:**
> 
> The `selected` property of a sp-menu-item seems to have been designed for non-multiple sp-menus only. It overwrites the current selected value so that there’s always just one selected item at a time, which prevents me from prefilling the dropdown with the initial values.
> 
> **One more thought:**  
> Maybe the sp-dropdown / sp-menu should expose more events than just a `change` event? If it provided a more specific `onSelect(opt)` , state updates would be a lot easier as only the single changed option would have to be updated.
> 
> **Edit: Another thing I just noticed:**  
> When there’s more than one option selected, the dropdown text will only display the first selected options name. From a usability point of view that’s quite problematic as the user has no visual feedback of what’s selected and if his selection worked, other than reopening the dropdown to double-check. Commonly it should show something like “Option1, Option2” or “2 Selected”.

Are there any news regarding these 3 points?

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [March 11, 2022, 11:12am UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/7 "2022-03-11T11:12:35Z")

</div>

Another bug / missing feature for `sp-menu`: It’s not possible to pre-select multiple `sp-menu-items`. If more than one element has the `selected` attribute, only the last one will be selected at the start.  
Additional menu items can only be selected via user interaction 😕

---

<div class="post-metadata">

**Author:** ![amandah](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/amandah/32/1730_2.png) [@amandah](https://forums.creativeclouddeveloper.com/u/amandah)\
**Post date:** [March 14, 2022, 8:59pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/8 "2022-03-14T20:59:36Z")

</div>

Hi @simonhenke , thank you for noting these bugs with `sp-menu` and `sp-dropdown`. I’ll be sure to pass these notes on to the right people. And this answer is late but the forums is a great place to file bugs you notice!

---

<div class="post-metadata">

**Author:** ![yajiv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/yajiv/32/3115_2.png) [@yajiv](https://forums.creativeclouddeveloper.com/u/yajiv)\
**Post date:** [January 21, 2023, 1:04pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/9 "2023-01-21T13:04:54Z")

</div>

Hello everyOne!  
is this issue resolved now?  
Since I still facing the issue.

---

<div class="post-metadata">

**Author:** ![dkyeah](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/dkyeah/32/3383_2.png) [@dkyeah](https://forums.creativeclouddeveloper.com/u/dkyeah)\
**Post date:** [February 15, 2024, 7:25pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/10 "2024-02-15T19:25:58Z")

</div>

I had the same issue; I tried to use a wrapper as described [here](http://forums.creativeclouddeveloper.com/t/why-sp-picker-does-not-respond-on-change/6885/6). But nothing worked. Out of desperation, I tried adding an onClick on the sp-menu-item elements of the sp-picker, and it worked.

Also, if you’re looking to use multiple selection, adding multiple=“true” to sp-menu seems to do the trick. Then, if using react, you can add a useRef onto the sp-menu to find the selected options.

Here’s an example of sp-picker that works for me:

```auto
<sp-picker>
  <sp-label slot="label">Pick your option(s)</sp-label>
    <sp-menu ref={pickerRef} multiple="true" >
        {elementsList.map(element => (
            <sp-menu-item key={element} value={element} onClick={handleSelect}>
              {element}
            </sp-menu-item>
        ))}
    </sp-menu>
</sp-picker>

```

Here’s the handleSelect:

```auto
const handleSelect = () => {        
        let selectedOptions = [];
        for (const menuItem of pickerRef.current.selectedOptions) {
            selectedOptions.push(menuItem.value);
        }   
        console.log(selectedOptions)
    };

```

Don’t forget to add useRef to your react import and declare the ref before using it. I hope this helps.

---

<div class="post-metadata">

**Author:** ![mvan](https://avatars.discourse-cdn.com/v4/letter/m/848f3c/32.png) [@mvan](https://forums.creativeclouddeveloper.com/u/mvan)\
**Post date:** [June 17, 2024, 7:48pm UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/11 "2024-06-17T19:48:44Z")

</div>

Any updates on this? it would be great to get this logged as a bug if not already done.  
The `multiple` property on the `sp-menu` still doesn’t allow us to initialize multiple `sp-menu-item`s as selected.  
Thanks!

---

<div class="post-metadata">

**Author:** ![philipbuckley](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@philipbuckley](https://forums.creativeclouddeveloper.com/u/philipbuckley)\
**Post date:** [July 30, 2024, 10:38am UTC](https://forums.creativeclouddeveloper.com/t/bug-disabled-in-select-option-does-not-work/2270/12 "2024-07-30T10:38:35Z")

</div>

That you don’t seem to be able to set multiple sp-menu-items as selected has tripped me up to.

I would like to show the user a list of items from which they can choose multiple items. I’d like to give the user “Select All” and “Select None” buttons so they can easily select every item or clear the list of selected items.

I can almost do what I want with the \<sp-menu\> widget (multiple clicks selecting multiple items works OK), but I haven’t found a way to implement Select All. (BTW I don’t use React or SWC.)

Unless anyone has a clever trick for selecting multiple sp-menu-items in code, I guess I’ll have to write my own web component to achieve what I want.