[Autocomplete] Fix Multiple tag delete action (mui#18153)

rambuvn · Nov 9, 2019 · 096bbc0 · 096bbc0
1 parent 0050cb8
commit 096bbc0
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 77 deletions.
diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md
@@ -60,7 +60,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">renderGroup</span> | <span class="prop-type">func</span> |  | Render the group.<br><br>**Signature:**<br>`function(option: any) => ReactNode`<br>*option:* The group to render. |
 | <span class="prop-name required">renderInput&nbsp;*</span> | <span class="prop-type">func</span> |  | Render the input.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* null |
 | <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> |  | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(option: any, state: object) => ReactNode`<br>*option:* The option to render.<br>*state:* The state of the component. |
-| <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> |  | Render the selected value.<br><br>**Signature:**<br>`function(value: any) => ReactNode`<br>*value:* The `value` provided to the component. |
+| <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> |  | Render the selected value.<br><br>**Signature:**<br>`function(value: any, getTagProps: function) => ReactNode`<br>*value:* The `value` provided to the component.<br>*getTagProps:* A tag props getter. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the autocomplete. |
 
 The `ref` is forwarded to the root element.

diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js
@@ -146,13 +146,7 @@ export default function CustomizedHook() {
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
           {value.map((option, index) => (
-            <Tag
-              key={index}
-              data-tag-index={index}
-              tabIndex={-1}
-              label={option.title}
-              {...getTagProps()}
-            />
+            <Tag label={option.title} {...getTagProps({ index })} />
           ))}
 
           <input {...getInputProps()} />

diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
@@ -146,13 +146,7 @@ export default function CustomizedHook() {
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
           {value.map((option: FilmOptionType, index: number) => (
-            <Tag
-              key={index}
-              data-tag-index={index}
-              tabIndex={-1}
-              label={option.title}
-              {...getTagProps()}
-            />
+            <Tag label={option.title} {...getTagProps({ index })} />
           ))}
           <input {...getInputProps()} />
         </InputWrapper>

diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js
@@ -11,17 +11,9 @@ export default function FixedTags() {
       options={top100Films}
       getOptionLabel={option => option.title}
       defaultValue={[top100Films[6], top100Films[13]]}
-      renderTags={(value, { className, onDelete }) =>
+      renderTags={(value, getTagProps) =>
         value.map((option, index) => (
-          <Chip
-            key={index}
-            disabled={index === 0}
-            data-tag-index={index}
-            tabIndex={-1}
-            label={option.title}
-            className={className}
-            onDelete={onDelete}
-          />
+          <Chip disabled={index === 0} label={option.title} {...getTagProps({ index })} />
         ))
       }
       style={{ width: 500 }}

diff --git a/docs/src/pages/components/autocomplete/FixedTags.tsx b/docs/src/pages/components/autocomplete/FixedTags.tsx
@@ -11,17 +11,9 @@ export default function FixedTags() {
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}
       defaultValue={[top100Films[6], top100Films[13]]}
-      renderTags={(value: FilmOptionType[], { className, onDelete }) =>
+      renderTags={(value: FilmOptionType[], getTagProps) =>
         value.map((option: FilmOptionType, index: number) => (
-          <Chip
-            key={index}
-            disabled={index === 0}
-            data-tag-index={index}
-            tabIndex={-1}
-            label={option.title}
-            className={className}
-            onDelete={onDelete}
-          />
+          <Chip disabled={index === 0} label={option.title} {...getTagProps({ index })} />
         ))
       }
       style={{ width: 500 }}

diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js
@@ -45,17 +45,9 @@ export default function Tags() {
         options={top100Films.map(option => option.title)}
         defaultValue={[top100Films[13].title]}
         freeSolo
-        renderTags={(value, { className, onDelete }) =>
+        renderTags={(value, getTagProps) =>
           value.map((option, index) => (
-            <Chip
-              key={index}
-              variant="outlined"
-              data-tag-index={index}
-              tabIndex={-1}
-              label={option}
-              className={className}
-              onDelete={onDelete}
-            />
+            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
           ))
         }
         renderInput={params => (

diff --git a/docs/src/pages/components/autocomplete/Tags.tsx b/docs/src/pages/components/autocomplete/Tags.tsx
@@ -45,17 +45,9 @@ export default function Tags() {
         options={top100Films.map(option => option.title)}
         defaultValue={[top100Films[13].title]}
         freeSolo
-        renderTags={(value: string[], { className, onDelete }) =>
+        renderTags={(value: string[], getTagProps) =>
           value.map((option: string, index: number) => (
-            <Chip
-              key={index}
-              variant="outlined"
-              data-tag-index={index}
-              tabIndex={-1}
-              label={option}
-              className={className}
-              onDelete={onDelete}
-            />
+            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
           ))
         }
         renderInput={params => (

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
@@ -15,10 +15,7 @@ export interface RenderOptionState {
   selected: boolean;
 }
 
-export interface RenderValueState {
-  className: string;
-  onDelete: () => {};
-}
+export type GetTagProps = ({ index }: { index: number }) => {};
 
 export interface RenderGroupParams {
   key: string;
@@ -103,9 +100,10 @@ export interface AutocompleteProps
    * Render the selected value.
    *
    * @param {any} value The `value` provided to the component.
+   * @param {function} getTagProps A tag props getter.
    * @returns {ReactNode}
    */
-  renderTags?: (value: any, state: RenderValueState) => React.ReactNode;
+  renderTags?: (value: any, getTagProps: GetTagProps) => React.ReactNode;
 }
 
 export type AutocompleteClassKey =

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -232,22 +232,16 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
   let startAdornment;
 
   if (multiple && value.length > 0) {
-    const tagProps = {
-      ...getTagProps(),
+    const getCustomizedTagProps = params => ({
       className: classes.tag,
-    };
+      ...getTagProps(params),
+    });
 
     if (renderTags) {
-      startAdornment = renderTags(value, tagProps);
+      startAdornment = renderTags(value, getCustomizedTagProps);
     } else {
       startAdornment = value.map((option, index) => (
-        <Chip
-          key={index}
-          data-tag-index={index}
-          tabIndex={-1}
-          label={getOptionLabel(option)}
-          {...tagProps}
-        />
+        <Chip label={getOptionLabel(option)} {...getCustomizedTagProps({ index })} />
       ));
     }
   }
@@ -570,6 +564,7 @@ Autocomplete.propTypes = {
    * Render the selected value.
    *
    * @param {any} value The `value` provided to the component.
+   * @param {function} getTagProps A tag props getter.
    * @returns {ReactNode}
    */
   renderTags: PropTypes.func,

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -51,6 +51,23 @@ describe('<Autocomplete />', () => {
       document.activeElement.blur();
       input.focus();
     });
+
+    it('should remove the last option', () => {
+      const handleChange = spy();
+      const options = ['one', 'two'];
+      const { container } = render(
+        <Autocomplete
+          defaultValue={options}
+          options={options}
+          onChange={handleChange}
+          renderInput={params => <TextField {...params} />}
+          multiple
+        />,
+      );
+      fireEvent.click(container.querySelectorAll('svg[data-mui-test="CancelIcon"]')[1]);
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.args[0][1]).to.deep.equal([options[0]]);
+    });
   });
 
   describe('WAI-ARIA conforming markup', () => {

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
@@ -158,7 +158,7 @@ export default function useAutocomplete(
   getInputLabelProps: () => {};
   getClearProps: () => {};
   getPopupIndicatorProps: () => {};
-  getTagProps: () => {};
+  getTagProps: ({ index }: { index: number }) => {};
   getListboxProps: () => {};
   getOptionProps: ({ option, index }: { option: any; index: number }) => {};
   id: string;

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -613,8 +613,7 @@ export default function useAutocomplete(props) {
     selectNewValue(event, filteredOptions[highlightedIndexRef.current]);
   };
 
-  const handleTagDelete = event => {
-    const index = Number(event.currentTarget.getAttribute('data-tag-index'));
+  const handleTagDelete = index => event => {
     const newValue = [...value];
     newValue.splice(index, 1);
     handleValue(event, newValue);
@@ -705,8 +704,11 @@ export default function useAutocomplete(props) {
         event.preventDefault();
       },
     }),
-    getTagProps: () => ({
-      onDelete: handleTagDelete,
+    getTagProps: ({ index }) => ({
+      key: index,
+      'data-tag-index': index,
+      tabIndex: -1,
+      onDelete: handleTagDelete(index),
     }),
     getListboxProps: () => ({
       role: 'listbox',
@@ -722,9 +724,9 @@ export default function useAutocomplete(props) {
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
 
       return {
+        key: index,
         tabIndex: -1,
         role: 'option',
-        key: index,
         id: `${id}-option-${index}`,
         onMouseOver: handleOptionMouseOver,
         onClick: handleOptionClick,