attempt at adding name prop to select element

react-component · Jul 13, 2022 · 6ec2f02 · 6ec2f02
1 parent 08757c1
commit 6ec2f02
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 51 deletions.
diff --git a/docs/examples/auto-adjust-dropdown.tsx b/docs/examples/auto-adjust-dropdown.tsx
@@ -8,7 +8,7 @@ class Test extends React.Component {
     value: '3',
   };
 
-  onChange = e => {
+  onChange = (e) => {
     let value;
     if (e && e.target) {
       ({ value } = e.target);
@@ -35,48 +35,29 @@ class Test extends React.Component {
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <div>
             <Select
+              name="test-name-value--------"
               onChange={this.onChange}
               dropdownMatchSelectWidth={500}
               value={value}
             >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
               <Option value="3">Jill</Option>
             </Select>
           </div>
           <div>
-            <Select
-              onChange={this.onChange}
-              dropdownMatchSelectWidth={500}
-              value={value}
-            >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>{' '}
+            <Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>{' '}
               <Option value="3">Jill</Option>
             </Select>
           </div>
         </div>
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           <div>
-            <Select
-              onChange={this.onChange}
-              dropdownMatchSelectWidth={500}
-              value={value}
-            >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>
+            <Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
               <Option value="3">Jill</Option>
             </Select>
           </div>
@@ -88,32 +69,16 @@ class Test extends React.Component {
           }}
         >
           <div>
-            <Select
-              onChange={this.onChange}
-              dropdownMatchSelectWidth={500}
-              value={value}
-            >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>
+            <Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
               <Option value="3">Jill</Option>
             </Select>
           </div>
           <div>
-            <Select
-              onChange={this.onChange}
-              dropdownMatchSelectWidth={500}
-              value={value}
-            >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>
+            <Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
               <Option value="3">Jill</Option>
             </Select>
           </div>

diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx
@@ -121,6 +121,7 @@ export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSele
 
 export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
   className?: string;
+  name?: string;
   style?: React.CSSProperties;
   showSearch?: boolean;
   tagRender?: (props: CustomTagProps) => React.ReactElement;
@@ -726,6 +727,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
   const selectorNode = (
     <SelectTrigger
       ref={triggerRef}
+      name={name}
       disabled={disabled}
       prefixCls={prefixCls}
       visible={triggerOpen}

diff --git a/src/Select.tsx b/src/Select.tsx
@@ -159,6 +159,7 @@ const Select = React.forwardRef(
     const {
       id,
       mode,
+      name,
       prefixCls = 'rc-select',
       backfill,
       fieldNames,
@@ -612,6 +613,7 @@ const Select = React.forwardRef(
           {...restProps}
           // >>> MISC
           id={mergedId}
+          name={name}
           prefixCls={prefixCls}
           ref={ref}
           omitDomProps={OMIT_DOM_PROPS}