Setting value by array of ids

[robodna]

Is there a way to set the value of the solid select by using an index/key value instead of setting the value to and object or array of objects? So if my object is {id:1,name:"test"} I would want set value to 1 to select.

[martinpengellyphillips]

I'm not clear what you are asking. Please share the code you have so far to explain the issue better 😀

Also, have you looked through the examples on https://solid-select.com/ ?

At a guess, https://solid-select.com/?example=Format or https://solid-select.com/?example=Format%2520%28Options%29 might help.

[robodna]

I meant to be able to set the value of solid select like this: <Select value={1} or <Select value={[1,2,3]} instead of <Select value={{id:1,name="Test"}}

[martinpengellyphillips]

🤔 You can set whatever you want as a value (e.g. <Select initialValue={1} /> would display '1' in the select control).

If you can share a full example of what you want to achieve and where it is not working then I'll be able to guide better.

[martinpengellyphillips]

I'm not sure why you'd want to do this, but maybe this is the sort of thing you are after?

import { Select } from "@thisbeyond/solid-select";
import { createSignal } from "solid-js";

export const IndirectionExample = () => {
  const options = [
    { id: 1, name: "apple" },
    { id: 2, name: "pear" },
  ];

  const [value, setValue] = createSignal(1);

  return (
    <div
      style={{
        flex: 1,
        display: "flex",
        "flex-direction": "column",
        gap: "8px",
      }}
    >
      <Select
        initialValue={value()}
        options={options}
        format={(item, type) =>
          type === "option"
            ? item.name
            : options.find((o) => o.id === item).name
        }
        optionToValue={(option) => option.id}
        onChange={setValue}
      />
      Current value: {value()}
    </div>
  );
};

[neerava2023]

Is it not possible to add a 'selectedOption' prop which takes a callback like so (item: T) => boolean with this its up to the user to decide how they would like to manage default selected options?

Also I noticed when the 'initialValue' is set you call onChange which is really not such a great idea. In my case the onchange triggers a prompt which asks the user whether they truly want to update the selected option. Please consider this addition.

[arieroos]

@neerava2023 you can always use a custom on_change function that compares the changed value to the value you currently have in the signal, and then only prompt the user if there is an actual change.

Something like this:

const myOnChange = (new_value) => {
        if(new_value != value()) {
            prompt_user();
            setValue(new_value);
        }
    } 
    
return (<Select 
    // all your other options
   onChange={myOnChange}
 />)

@martinpengellyphillips Thanks. I wanted to have a select that is always empty (it just serves as a lookup). Here is how I achieved it in the end:

const client_options = () => createOptions(
        clients ?? [],
        {
            key: "name",
            format: (item, type) => type === "label" ? item : ""
        }
    )

More documentation on exactly what each of these values mean would be highly appreciated. I figured it out by spamming console.log everywhere.