Select + Dynamic options. Selected dynamic option does not trigger change event.

[dpaniq]

There is a playground placed on stackblitz.

---

I am using SolidJS and SUID ( Solid material UI ) library.

I am trying to use the same example as in the SUID documentation.
https://suid.io/components/select

import { For, createResource, createSignal } from 'solid-js';
import { Select, MenuItem } from '@suid/material'; // or "solid-ui", based on the library's exports

function Post() {
  const [postsResource, { mutate, refetch }] = createResource(async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  });

  // State for the selected option
  const [selectedOption, setSelectedOption] = createSignal('any');

  return (
    <div>
      <h1>Posts</h1>
      {postsResource.loading && <p>Loading...</p>}
      {postsResource.error && <p>Error: {postsResource.error.message}</p>}
       {postsResource.state === 'ready' && (
        <>
          <Select
            // defaultValue={'any'}
            // value={selectedOption()}
            onChange={(e) => {
              console.log('onChange', e.currentTarget);
              setSelectedOption(e.currentTarget.value);
            }}
          >
            <MenuItem value="any">Choose any...</MenuItem>
            <MenuItem value="option1">option1</MenuItem>
            <MenuItem value="option2">option2</MenuItem>
            <For each={postsResource()}>
              {(post) => <MenuItem value={post.id}>{post.title}</MenuItem>}
            </For>
          </Select>
        </>
      }
    </div>
  );
}

export default Post;

---

In this case, the Options that have values like any, option1 and option2 (static options) are selectable, but other are not.

Also I should mention, when I use static options (code below) a Select works fine.

  const options = [
    {id: 1, label: 'Option 1'},
    {id: 2, label: 'Option 2'},
    {id: 3, label: 'Option 3'},
  ];

But when I use dynamic options (fetch, createResource, promise, etc), something goes wrong. There are main problems:

• Chosen Option does not change Select value
• onChange handler always receives similar value
• More than two Select changes cause console errors:

MUI: A component is changing the uncontrolled value state of Select to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Select element for the lifetime of the component.
The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.

I tried to:

1. Set a defaultValue to Select;
2. Set a defaultValue to createSignal;
3. Set a tabIndex, because I noticed that in For each MenuItem has tabIndex=-1
   

---

What my expectations are:

• I should be able to choose any option from the Select

---

There is a playground placed on stackblitz.

I described an issue on stackoverflow as well.

Screencast.from.09-04-2023.08.37.38.PM.webm

[juanrgm]

I must recreate part of the mechanism responsible for managing the selection values. Thanks for the detailed report.

Duplicated (#223).