QUESTION: Initial values must be full objects and not only array of valueField properties ... why?

[devnull69]

Usually the values of a dropdown are being determined by their value property. react-dropdown-select lets you specify the valueField dynamically, which is great.

But still, you need to specify the FULL OBJECTS rather than an array of specific valueField properties. Why is that? I would really prefer to specify only valueField properties, which seems to be normal to me. Am I wrong?

[sanusart]

Can you please throw in a quick example of "FULL OBJECTS" as apose to what expected? For my better understanding of the question.

[devnull69]

Simple Example: I have an object with labels and values like this

const options = [{
   "label": "Selection Number 1",
   "value": "one"
}, {
   "label": "Selection Number 2",
   "value": "two"
}]

Now I need to provide the full object to the "values" property of the component to select the first element

<Select
   ...
   values={[options[0]]}
   options={options}
   ...
/>

rather than this (which also works on the standard HTML select)

<Select
   ...
   values={["one"]}
   options={options}
   ...
/>

Am I missing something?

[sanusart]

Got it. Thanks for the example. The main reason behind this, is this component is not based on html select and nor it is a wrapper around it. Regular html select is only accepts strings as an options.

This component should be considered more like a drop-down than a select.

Is that make sense?

On Thu, Jul 27, 2023, 12:42 PM Thomas Theiner @.***> wrote:

Simple Example: I have an object with labels and values like this

const options = [{ "label": "Selection Number 1", "value": "one" }, { "label": "Selection Number 2", "value": "two" }]

Now I need to provide the full object to the "values" property of the component to select the first element

<Select ... values={[options[0]]} ... />

rather than this (which also works on the standard HTML select)

<Select ... values={["one"]} ... />

Am I missing something?

— Reply to this email directly, view it on GitHub https://github.com/sanusart/react-dropdown-select/issues/289#issuecomment-1653266882, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACBLRRTFE7GIETV2HY7OT3XSIZYLANCNFSM6AAAAAA2ZWVS7A . You are receiving this because you commented.Message ID: @.***>

[devnull69]

Ok, would it be possible to make this optional? So that there are two cases

1. (default case) use the full objects
2. (optional case) use the valueField property only. It should (of course) be unique, so it identifies a single specific object from the options, but this is the responsibility of the developer using the component

This option should then be valid for the values during the full lifecycle of the component, so onChange should provide only the valueField properties of the selected values.

Would this be possible and feasible for you?

I'm asking because it is widespread standard behavior for both dropdowns and comboboxes all over the internet to have just one single property being the actual value of the component

Also: Your example on CodeSandbox doesn't work correctly. The pre-selected value "Delphine" is not showing in the Selected Values section on the bottom

Suggested fixes:

    this.state = {
      ...
      selectValues: [options[8]],

and

  render() {
     ...
            <StyledSelect
              ...
              values={this.state.selectValues}

[devnull69]

Another question at this point: You allow to specify the "valueField" as a property ... but if this is not the value property, what is it then? Meaning: What is the purpose of the valueField property?

[sanusart]

Thanks for pointing out the "Delphine" case. Will check that, probably gonna convert it all to be Storybook. Too bordersome to maintain examples and demose in a way it it now.

(default case) use the full objects (optional case) use the valueField property only. It should (of course) be unique, so it identifies a single specific object from the options, but this is the responsibility of the developer using the component

Well inner components all expect objects to be the values. We can support accepting array of strings, but it will still gonna be converted/mapped to be object of [{ label, value }] for internal use. If you interested - can you please open seperate issue for that and we deal with it as a feature request?

Another question at this point: You allow to specify the "valueField" as a property ... but if this is not the value property, what is it then? Meaning: What is the purpose of the valueField property?

If for exampple you have data object sctructure as folows:

[
  { id: 'ecce4e4', name: 'John' }
]

Then you don't need to remap it to:

[
  { value: 'ecce4e4', label: 'John' }
]

You can just tell select what property to use for values and for labels <Select valueField="id" labelField="name" />

[devnull69]

Yes I know that ... but what does "use for values" mean if "id" is NOT the value of the component?

[sanusart]

The component usume to recieve options in the form of [{ label: "John", value: "john" }, { label: "Jack", value: "jack" }].

Label is used for visual representation and value is for value.

Imagine as if you would do on regular html select. <option value="john">John</option> - where john is the value and "John" is the label for the presentation.

Now if the data object you provide to the component options does not have value and label properties - you would have to re-map your data for component to include value and label properties. This two props alowing you to specify what property on your object to "use as value" and what property on your object to "use as label".

Make sence?

devnull69 commented 1 year ago

You are misunderstanding my question. I understand the approach to have those properties. But the valueField property would ONLY make sense, if it would REALLY specify the value property of your component.

Take my example above and assume that valueField: {"value"} and labelField: {"label"} (which is the default I presume)

• The options are objects
• The values are an ARRAY OF OBJECTS ... it specifies all the selected objects
• The values are NOT specified by the valueField property at all ... the values are ALWAYS full objects and not the content of the property that valueField points to

Bottom line: The valueField property doesn't add anything to your component. It would only add to the component if (and that is my original question) the value of the component would be determined by this property

sanusart commented 1 year ago

You are misunderstanding my question

Apologies for that.

valueField and labelField props are only meant for "options" the data opgect you provide. They have nothing to do with values. This is their entire purpose. Nothing more and nothing less.

devnull69 commented 1 year ago

But still ... it would make no difference for your component (none at all!) if you omitted the valueField setting. Because also the options don't need it, because each option is an object and not determined by a value property :-)

Never mind. I might try to implement this feature request myself with a pull request

sanusart commented 1 year ago

But consider this data:

const options = [
  {
    id: 1,
    name: "Leanne Graham"
  },
  {
    id:  2,
    name: "Ervin Howell"
  }
];

This for example would not work out of the box:

<Select options={options} onChange={(values) => this.setValues(values)} />

But this would: <Select options={options} labelField="name" valueField="id" onChange={(values) => this.setValues(values)} />

sanusart commented 1 year ago

Never mind. I might try to implement this feature request myself with a pull request

That would be great!

devnull69 commented 1 year ago

Ok, obviously you are using this property internally somewhere ... because the dropdown is showing just fine without this property, but as soon as you click on the dropdown to select another option, it crashes

I will take a look at this ... :-)

sanusart commented 1 year ago

obviously you are using this property internally somewhere

Exactly - this is what I was trying to comunicate.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[devnull69]

You are misunderstanding my question. I understand the approach to have those properties. But the valueField property would ONLY make sense, if it would REALLY specify the value property of your component.

Take my example above and assume that valueField: {"value"} and labelField: {"label"} (which is the default I presume)

• The options are objects
• The values are an ARRAY OF OBJECTS ... it specifies all the selected objects
• The values are NOT specified by the valueField property at all ... the values are ALWAYS full objects and not the content of the property that valueField points to

Bottom line: The valueField property doesn't add anything to your component. It would only add to the component if (and that is my original question) the value of the component would be determined by this property

[sanusart]

You are misunderstanding my question

Apologies for that.

valueField and labelField props are only meant for "options" the data opgect you provide. They have nothing to do with values. This is their entire purpose. Nothing more and nothing less.

[devnull69]

But still ... it would make no difference for your component (none at all!) if you omitted the valueField setting. Because also the options don't need it, because each option is an object and not determined by a value property :-)

Never mind. I might try to implement this feature request myself with a pull request

[sanusart]

But consider this data:

const options = [
  {
    id: 1,
    name: "Leanne Graham"
  },
  {
    id:  2,
    name: "Ervin Howell"
  }
];

This for example would not work out of the box:

<Select options={options} onChange={(values) => this.setValues(values)} />

But this would: <Select options={options} labelField="name" valueField="id" onChange={(values) => this.setValues(values)} />

[sanusart]

Never mind. I might try to implement this feature request myself with a pull request

That would be great!

[devnull69]

Ok, obviously you are using this property internally somewhere ... because the dropdown is showing just fine without this property, but as soon as you click on the dropdown to select another option, it crashes

I will take a look at this ... :-)

[sanusart]

obviously you are using this property internally somewhere

Exactly - this is what I was trying to comunicate.