[docs] Fix fourth downshift demo not clearing input

mui · May 26, 2019 · 0e3d77f · 0e3d77f
1 parent d2f5000
commit 0e3d77f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 32 deletions.
diff --git a/docs/src/pages/components/autocomplete/IntegrationDownshift.js b/docs/src/pages/components/autocomplete/IntegrationDownshift.js
@@ -320,6 +320,7 @@ function IntegrationDownshift() {
                 classes,
                 label: 'Countries',
                 InputLabelProps: getLabelProps({ shrink: true }),
+                InputProps: { onBlur, onFocus },
                 inputProps,
                 ref: node => {
                   popperNode = node;
@@ -362,7 +363,15 @@ function IntegrationDownshift() {
           openMenu,
           selectedItem,
         }) => {
-          const { onBlur, onFocus, ...inputProps } = getInputProps({ foo: 1 });
+          const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
+            onChange: event => {
+              if (event.target.value === '') {
+                clearSelection();
+              }
+            },
+            onFocus: openMenu,
+            placeholder: 'With the clear & show empty options',
+          });
 
           return (
             <div className={classes.container}>
@@ -371,21 +380,7 @@ function IntegrationDownshift() {
                 classes,
                 label: 'Countries',
                 InputLabelProps: getLabelProps({ shrink: true }),
-                InputProps: {
-                  onBlur,
-                  onFocus: event => {
-                    openMenu();
-                    if (onFocus !== undefined) {
-                      onFocus(event);
-                    }
-                  },
-                  onChange: event => {
-                    if (event.target.value === '') {
-                      clearSelection();
-                    }
-                  },
-                  placeholder: 'With the clear & show empty options',
-                },
+                InputProps: { onBlur, onChange, onFocus },
                 inputProps,
               })}
 

diff --git a/docs/src/pages/components/autocomplete/IntegrationDownshift.tsx b/docs/src/pages/components/autocomplete/IntegrationDownshift.tsx
@@ -339,6 +339,7 @@ function IntegrationDownshift() {
                 fullWidth: true,
                 classes,
                 label: 'Countries',
+                InputProps: { onBlur, onFocus },
                 InputLabelProps: getLabelProps({ shrink: true } as any),
                 inputProps,
                 ref: node => {
@@ -381,7 +382,15 @@ function IntegrationDownshift() {
           openMenu,
           selectedItem,
         }) => {
-          const { onBlur, onFocus, ...inputProps } = getInputProps({ foo: 1 });
+          const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
+            onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+              if (event.target.value === '') {
+                clearSelection();
+              }
+            },
+            onFocus: openMenu,
+            placeholder: 'With the clear & show empty options',
+          });
 
           return (
             <div className={classes.container}>
@@ -390,21 +399,7 @@ function IntegrationDownshift() {
                 classes,
                 label: 'Countries',
                 InputLabelProps: getLabelProps({ shrink: true } as any),
-                InputProps: {
-                  onBlur,
-                  onFocus: event => {
-                    openMenu();
-                    if (onFocus !== undefined) {
-                      onFocus(event as React.FocusEvent<HTMLInputElement>);
-                    }
-                  },
-                  onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-                    if (event.target.value === '') {
-                      clearSelection();
-                    }
-                  },
-                  placeholder: 'With the clear & show empty options',
-                },
+                InputProps: { onBlur, onChange, onFocus },
                 inputProps,
               })}
               <div {...getMenuProps()}>