feat: add native input DOM to follow standard behavior of HTML

[nnmax]

Related

790

ant-design/ant-design#36489

💡 Background and solution

<Select /> is a form element which should have the ability to interact with the form.

Ant Design is a great project that has brought great convenience to front-end developers all over the world.

However, until now, Ant Design's <Select /> still doesn't support this functionality. We had to use some hacks to implement it:

const App = () => {
  const defaultValue = "lucy";
  const [name, setName] = useState(defaultValue);

  const handleChange = (changedValue: string) => {
    setName(changedValue);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    console.log("name", formData.get("name"));
  };

  return (
    <form onSubmit={handleSubmit}>
      <Select
        defaultValue={defaultValue}
        style={{ width: 120 }}
        onChange={handleChange}
        options={[
          { value: "jack", label: "Jack" },
          { value: "lucy", label: "Lucy" },
          { value: "max", label: "Max" },
        ]}
      />
      <input name="name" type="hidden" value={name} />
      <button type="submit">Submit</button>
    </form>
  );
};

This PR implements the above functionality and simply passes in nativeInputProps to do so:

const App = () => {
  const defaultValue = "lucy";
- const [name, setName] = useState(defaultValue);

  const handleChange = (changedValue: string) => {
    setName(changedValue);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    console.log("name", formData.get("name"));
  };

  return (
    <form onSubmit={handleSubmit}>
      <Select
        defaultValue={defaultValue}
        style={{ width: 120 }}
        onChange={handleChange}
+       nativeInputProps={{ name: 'name' }}
        options={[
          { value: "jack", label: "Jack" },
          { value: "lucy", label: "Lucy" },
          { value: "max", label: "Max" },
        ]}
      />
-     <input name="name" type="hidden" value={name} />
      <button type="submit">Submit</button>
    </form>
  );
};

The above code renders a hidden input DOM to receive form related attributes. In case of <Select /> with multiple or tags mode, the value of the input is a comma-separated string.

The type of nativeInputProps is React.InputHTMLAttributes<HTMLInputElement>, which accepts all input props.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
select	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 8, 2024 6:10am

[nnmax]

If there are any problems, I am willing to actively update this PR until it is merged.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (c93ff10) 99.78% compared to head (0a8c1d7) 99.78%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #1018 +/- ## ======================================= Coverage 99.78% 99.78% ======================================= Files 38 39 +1 Lines 1398 1405 +7 Branches 391 391 ======================================= + Hits 1395 1402 +7 Misses 3 3 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[zombieJ]

Since Select always has the search input, seems it will confuse the reader to check the real value holder if search input exist. Could it to add aria value on the search input instead to patch another input?

[nnmax]

Since Select always has the search input, seems it will confuse the reader to check the real value holder if search input exist. Could it to add aria value on the search input instead to patch another input?

What aria value should I add to the search input?

[KMJ-007]

any update on this?