[Bug] disabled in select option does not work

Photoshop
, , , ,
10

I had the same issue; I tried to use a wrapper as described here. 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:

<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:

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.