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]

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]

Codecov Report

All modified and coverable lines are covered by tests ✅

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

Additional details and impacted files

@@           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           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[zombieJ]

There exist a input for search usage. Seems that one should be aria hidden?

[nnmax]

The role of the search input is a combobox, which contains many aria-* attributes that should not be aria hidden.

<SelectNativeInput /> is already aria hidden.

[zombieJ]

Why make SelectNativeInput aria hidden?

[nnmax]

I've changed the code:

export default React.forwardRef<HTMLInputElement, SelectNativeInputProps>(
  function SelectNativeInput(props, ref) {
    const { prefixCls, className, ...rest } = props;

    return (
      <input
-       aria-hidden
-       tabIndex={-1}
        type="hidden"
-       readOnly
        ref={ref}
        className={classNames(`${prefixCls}-native-input`, className)}
        {...rest}
      />
    );
  },
);

Thank you. You're right. aria-hidden shouldn't be set. But type="hidden" was already set. The screen reader still can't read it.

Should we remove the type='hidden' and add some accessibility attributes to make it accessible to screen readers?

[zombieJ]

I guess could use opacity: 0 + 0 width & height to let it invisible on the screen but still workable with reader.

[nnmax]

done

import classNames from 'classnames';
import React from 'react';

+ const visuallyHidden: React.CSSProperties = {
+   position: 'absolute',
+   overflow: 'hidden',
+   width: 1,
+   height: 1,
+   border: 0,
+   margin: -1,
+   padding: 0,
+   clip: 'rect(0 0 0 0)',
+   whiteSpace: 'nowrap',
+ };

interface SelectNativeInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  prefixCls?: string;
}

export default React.forwardRef<HTMLInputElement, SelectNativeInputProps>(
  function SelectNativeInput(props, ref) {
    const { prefixCls, className, style, ...rest } = props;

    return (
      <input
-       type="hidden"
        ref={ref}
        className={classNames(`${prefixCls}-native-input`, className)}
+       style={{ ...visuallyHidden, ...style }}
        {...rest}
      />
    );
  },
);

[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?