form onchange is not dispatching for selected dropdown

[kvernon]

I've been test driving this package, and I'm having trouble trying to go this to dispatch the form onchange event. This package will dispatch an onchange event when using the input, but the dropdown selection does nothing to align with listening to the form's onChange event. From this, I will say this packages dropdown's onChange does show app.select direct in the console of devtools.

Compare it with the native html select / option, this will fire the dispatch, however, we all know how "fun" this node is.

The goal is to have this be included with the other form options as they trigger

import React from 'react';
import Select from 'react-dropdown-select';

export const App = function () {
    return (<form
        name="sim"
        onChange={(evt) => {
            console.log('onChange', evt);
        }}
        onSubmit={(evt) => {
            evt.preventDefault();
            console.log('submit', evt);
        }}>
        <label>
            Test Select:
            <Select
            options={[{ label: 'NONE' }, { label: 'one' }]}
            values={[]}
            labelField={'label'}
            valueField={'label'}
            onChange={function (value: { label: string }[]): void {
                console.log('app.select direct', value);
            }}
            />
        </label>
        <select>
            <option>None</option>
            <option>ONE</option>
        </select>
        <button type="submit">Save</button>
    </form>);
}

[sanusart]

Hey, try to add name property to the select. It should be playing better with forms.

Example and source: https://github.com/sanusart/react-dropdown-select/blob/master/docs/src/examples/Form.js#L14

[kvernon]

Thank you for the suggestion. I just tried it, and nothing changed; meaning the form onchange still doesn't dispatch. :(

         <Select
            options={[{ label: 'NONE' }, { label: 'one' }]}
            values={[]}
            name="select"
            labelField={'label'}
            valueField={'label'}
            onChange={function (value: { label: string }[]): void {
              console.log('app.select direct', value);
            }}
          />

[sanusart]

Ah. I think I misunderstood the initial post. Select component is controlled, meaning the consumer is in charge to implement its own onChange tactics. I think best bet is using useState hook.