fix(AutoComplete): fix listbox not keeping the same width as input (

rsuite#2645)
myNameIsDu · Oct 12, 2022 · 72f4ee7 · 72f4ee7
1 parent edc42c8
commit 72f4ee7
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 40 deletions.
diff --git a/docs/pages/components/auto-complete/en-US/index.md b/docs/pages/components/auto-complete/en-US/index.md
@@ -12,7 +12,7 @@ Autocomplete function of input field.
 
 <!--{include:`basic.md`}-->
 
-### Autocomplete
+### Autocomplete suffix
 
 <!--{include:`email.md`}-->
 

diff --git a/docs/pages/components/auto-complete/fragments/basic.md b/docs/pages/components/auto-complete/fragments/basic.md
@@ -4,16 +4,29 @@
 import { AutoComplete } from 'rsuite';
 
 const data = [
-  'HYPER Advertiser',
-  'HYPER Web Analytics',
-  'HYPER Video Analytics',
-  'HYPER DMP',
-  'HYPER Ad Serving',
-  'HYPER Data Discovery'
+  'Eugenia',
+  'Bryan',
+  'Linda',
+  'Nancy',
+  'Lloyd',
+  'Alice',
+  'Julia',
+  'Albert',
+  'Louisa',
+  'Lester',
+  'Lola',
+  'Lydia',
+  'Hal',
+  'Hannah',
+  'Harriet',
+  'Hattie',
+  'Hazel',
+  'Hilda'
 ];
+
 const App = () => (
   <>
-    <AutoComplete data={data} />
+    <AutoComplete data={data} style={{ width: 224 }} />
   </>
 );
 

diff --git a/docs/pages/components/auto-complete/fragments/controlled.md b/docs/pages/components/auto-complete/fragments/controlled.md
@@ -4,17 +4,29 @@
 import { AutoComplete } from 'rsuite';
 
 const data = [
-  'HYPER Advertiser',
-  'HYPER Web Analytics',
-  'HYPER Video Analytics',
-  'HYPER DMP 中文',
-  'HYPER Ad Serving',
-  'HYPER Data Discovery'
+  'Eugenia',
+  'Bryan',
+  'Linda',
+  'Nancy',
+  'Lloyd',
+  'Alice',
+  'Julia',
+  'Albert',
+  'Louisa',
+  'Lester',
+  'Lola',
+  'Lydia',
+  'Hal',
+  'Hannah',
+  'Harriet',
+  'Hattie',
+  'Hazel',
+  'Hilda'
 ];
 
 const App = () => {
   const [value, setValue] = React.useState('');
-  return <AutoComplete data={data} value={value} onChange={setValue} />;
+  return <AutoComplete data={data} value={value} onChange={setValue} style={{ width: 224 }} />;
 };
 
 ReactDOM.render(<App />, document.getElementById('root'));

diff --git a/docs/pages/components/auto-complete/fragments/disabled.md b/docs/pages/components/auto-complete/fragments/disabled.md
@@ -3,24 +3,18 @@
 ```js
 import { AutoComplete } from 'rsuite';
 
-const data = [
-  'HYPER Advertiser',
-  'HYPER Web Analytics',
-  'HYPER Video Analytics',
-  'HYPER DMP',
-  'HYPER Ad Serving',
-  'HYPER Data Discovery'
-];
+const data = [];
+
 const App = () => (
   <div>
     <label>Disabled:</label>
-    <AutoComplete data={data} disabled defaultValue="HYPER Web Analytics" />
+    <AutoComplete data={data} disabled defaultValue="Eugenia" style={{ width: 224 }} />
     <hr />
     <label>Read only:</label>
-    <AutoComplete data={data} readOnly defaultValue="HYPER Web Analytics" />
+    <AutoComplete data={data} readOnly defaultValue="Eugenia" style={{ width: 224 }} />
     <hr />
     <label>Plaintext:</label>
-    <AutoComplete data={data} plaintext defaultValue="HYPER Web Analytics" />
+    <AutoComplete data={data} plaintext defaultValue="Eugenia" style={{ width: 224 }} />
   </div>
 );
 

diff --git a/docs/pages/components/auto-complete/fragments/email.md b/docs/pages/components/auto-complete/fragments/email.md
@@ -21,7 +21,9 @@ const App = () => {
     setData(nextData);
   };
 
-  return <AutoComplete data={data} placeholder="Email" onChange={handleChange} />;
+  return (
+    <AutoComplete data={data} placeholder="Email" onChange={handleChange} style={{ width: 224 }} />
+  );
 };
 
 ReactDOM.render(<App />, document.getElementById('root'));

diff --git a/docs/pages/components/auto-complete/fragments/input-group.md b/docs/pages/components/auto-complete/fragments/input-group.md
@@ -11,12 +11,24 @@ const styles = {
 };
 
 const data = [
-  'HYPER Advertiser',
-  'HYPER Web Analytics',
-  'HYPER Video Analytics',
-  'HYPER DMP',
-  'HYPER Ad Serving',
-  'HYPER Data Discovery'
+  'Eugenia',
+  'Bryan',
+  'Linda',
+  'Nancy',
+  'Lloyd',
+  'Alice',
+  'Julia',
+  'Albert',
+  'Louisa',
+  'Lester',
+  'Lola',
+  'Lydia',
+  'Hal',
+  'Hannah',
+  'Harriet',
+  'Hattie',
+  'Hazel',
+  'Hilda'
 ];
 
 const App = () => (

diff --git a/docs/pages/components/auto-complete/fragments/render-item.md b/docs/pages/components/auto-complete/fragments/render-item.md
@@ -5,16 +5,30 @@ import { AutoComplete } from 'rsuite';
 import MemberIcon from '@rsuite/icons/Member';
 
 const data = [
-  'HYPER Advertiser',
-  'HYPER Web Analytics',
-  'HYPER Video Analytics',
-  'HYPER DMP',
-  'HYPER Ad Serving',
-  'HYPER Data Discovery'
+  'Eugenia',
+  'Bryan',
+  'Linda',
+  'Nancy',
+  'Lloyd',
+  'Alice',
+  'Julia',
+  'Albert',
+  'Louisa',
+  'Lester',
+  'Lola',
+  'Lydia',
+  'Hal',
+  'Hannah',
+  'Harriet',
+  'Hattie',
+  'Hazel',
+  'Hilda'
 ];
+
 const App = () => (
   <AutoComplete
     data={data}
+    style={{ width: 224 }}
     renderMenuItem={item => {
       return (
         <div>

diff --git a/docs/pages/components/auto-complete/zh-CN/index.md b/docs/pages/components/auto-complete/zh-CN/index.md
@@ -12,7 +12,7 @@
 
 <!--{include:`basic.md`}-->
 
-### 自动补齐
+### 自动补齐后缀
 
 <!--{include:`email.md`}-->
 

diff --git a/src/AutoComplete/AutoComplete.tsx b/src/AutoComplete/AutoComplete.tsx
@@ -47,6 +47,9 @@ export interface AutoCompleteProps<T = ValueType>
   /** Placeholder text */
   placeholder?: string;
 
+  /** The width of the menu will automatically follow the width of the input box */
+  menuAutoWidth?: boolean;
+
   /** Custom filter function to determine whether the item will be displayed */
   filterBy?: (value: string, item: ItemDataType) => boolean;
 
@@ -92,6 +95,7 @@ const AutoComplete: PickerComponent<AutoCompleteProps> = React.forwardRef(
       selectOnEnter = true,
       classPrefix = 'auto-complete',
       defaultValue = '',
+      menuAutoWidth = true,
       data,
       value: valueProp,
       open,
@@ -254,6 +258,7 @@ const AutoComplete: PickerComponent<AutoCompleteProps> = React.forwardRef(
           className={className}
           onKeyDown={handleKeyDownEvent}
           target={triggerRef}
+          autoWidth={menuAutoWidth}
         >
           {renderMenu ? renderMenu(menu) : menu}
         </PickerOverlay>
@@ -298,6 +303,7 @@ AutoComplete.propTypes = {
   defaultValue: PropTypes.string,
   className: PropTypes.string,
   menuClassName: PropTypes.string,
+  menuAutoWidth: PropTypes.bool,
   placement: PropTypes.oneOf(PLACEMENT),
   onFocus: PropTypes.func,
   onMenuFocus: PropTypes.func,

diff --git a/src/AutoComplete/test/AutoCompleteSpec.js b/src/AutoComplete/test/AutoCompleteSpec.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
+import { render } from '@testing-library/react';
 import AutoComplete from '../AutoComplete';
 import { getDOMNode, getInstance } from '@test/testUtils';
 
@@ -260,4 +261,20 @@ describe('AutoComplete', () => {
 
     assert.equal(instance4.overlay.querySelectorAll('[role="option"]').length, 1);
   });
+
+  it('Should set minimum width for listbox', () => {
+    const { getByRole } = render(
+      <AutoComplete
+        data={['item1', 'item2', 'item3']}
+        defaultValue="item"
+        open
+        menuAutoWidth
+        style={{ width: 100 }}
+      />
+    );
+
+    const listbox = getByRole('listbox');
+
+    expect(listbox.parentNode.style.minWidth).to.equal('100px');
+  });
 });