thisbeyond / solid-select

The Select component for Solid.
https://solid-select.com
MIT License
168 stars 18 forks source link

Setting value by array of ids #64

Open robodna opened 2 weeks ago

robodna commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

🤔 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 commented 2 weeks ago

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>
  );
};