sanusart/react-dropdown-select

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

devnull69 opened this issue · 15 comments

devnull69 commented

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 commented

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

devnull69 commented

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 commented
devnull69 commented

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 commented

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 commented

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 commented

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

sanusart commented

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

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

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

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

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

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

That would be great!

devnull69 commented

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

obviously you are using this property internally somewhere

Exactly - this is what I was trying to comunicate.