Fix EuiComboBox focus trap

CHANGELOG.md

@@ -4,9 +4,11 @@
 
 - `EuiSearchBar` no longer has an `onParse` callback, and now passes an object to `onChange` with the shape `{ query, queryText, error }` ([#863](https://github.com/elastic/eui/pull/863))
 - `EuiInMemoryTable`'s `search.onChange` callback now passes an object with `{ query, queryText, error }` instead of only the query ([#863](https://github.com/elastic/eui/pull/863))
+- `EuiFormControlLayout` no longer has `onClear`, `iconSide`, or `onIconClick` props. Instead of `onClear` it now accepts a `clear` object of the shape `{ onClick }`. Instead of the icon props, it now accepts a single `icon` prop which be either a string or an object of the shape `{ type, side, onClick }`. ([#866](https://github.com/elastic/eui/pull/866))
 
 **Bug fixes**
 
+- `EuiComboBox` is no longer a focus trap, the clear button is now keyboard-accessible, and the virtualized list no longer interferes with the tab order ([#866](https://github.com/elastic/eui/pull/866))
 - `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` now look and behave disabled when `isDisabled={true}` ([#862](https://github.com/elastic/eui/pull/862))
 - `EuiGlobalToastList` no longer triggers `Uncaught TypeError: _this.callback is not a function`  ([#865](https://github.com/elastic/eui/pull/865))
 - `EuiGlobalToastList` checks to see if it has dismissed a toast before re-dismissing it ([#868](https://github.com/elastic/eui/pull/868))

src-docs/src/components/guide_page/guide_page.js

@@ -10,7 +10,7 @@ import {
   EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton
+  EuiButton,
 } from '../../../../src/components';
 
 export const GuidePage = ({ children, title, intro, componentLinkTo }) => {
@@ -38,6 +38,9 @@ export const GuidePage = ({ children, title, intro, componentLinkTo }) => {
       </div>
 
       {children}
+
+      {/* Give some space between the bottom of long content and the bottom of the screen */}
+      <EuiSpacer size="xl" />
     </Fragment>
   );
 };

src-docs/src/views/form_controls/field_password.js

@@ -72,6 +72,16 @@ export default class extends Component {
           onChange={this.onChange}
           compressed
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiFieldPassword
+          placeholder="Compressed and loading"
+          value={this.state.value}
+          onChange={this.onChange}
+          isLoading
+          compressed
+        />
       </Fragment>
     );
   }

src-docs/src/views/form_controls/form_control_layout.js

@@ -0,0 +1,110 @@
+import React, {
+  Fragment,
+} from 'react';
+
+import {
+  EuiFormControlLayout,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <Fragment>
+
+    <EuiFormControlLayout
+      icon="search"
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      isLoading
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      clear={{ onClick: () => {} }}
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      isLoading
+      clear={{ onClick: () => {} }}
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      isLoading
+      icon="search"
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      isLoading
+      icon={{ type: 'arrowDown', side: 'right' }}
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      clear={{ onClick: () => {} }}
+      icon="search"
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      clear={{ onClick: () => {} }}
+      icon={{ type: 'arrowDown', side: 'right' }}
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      isLoading
+      clear={{ onClick: () => {} }}
+      icon="search"
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      isLoading
+      clear={{ onClick: () => {} }}
+      icon={{ type: 'arrowDown', side: 'right' }}
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+
+    <EuiSpacer size="m" />
+
+    <EuiFormControlLayout
+      isLoading
+      clear={{ onClick: () => {} }}
+      icon="search"
+    >
+      <input type="text" className="euiFieldText" />
+    </EuiFormControlLayout>
+  </Fragment>
+);

src-docs/src/views/form_controls/form_controls_example.js

@@ -14,6 +14,7 @@ import {
   EuiFieldSearch,
   EuiFieldText,
   EuiFilePicker,
+  EuiFormControlLayout,
   EuiLink,
   EuiRadio,
   EuiRange,
@@ -74,6 +75,10 @@ import Switch from './switch';
 const switchSource = require('!!raw-loader!./switch');
 const switchHtml = renderToHtml(Switch);
 
+import FormControlLayout from './form_control_layout';
+const formControlLayoutSource = require('!!raw-loader!./form_control_layout');
+const formControlLayoutHtml = renderToHtml(FormControlLayout);
+
 export const FormControlsExample = {
   title: 'Form controls',
   sections: [{
@@ -255,6 +260,26 @@ export const FormControlsExample = {
       EuiSwitch,
     },
     demo: <Switch />,
+  }, {
+    title: 'Form control layout',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: formControlLayoutSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: formControlLayoutHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>EuiFormControlLayout</EuiCode> is generally used internally to consistently style
+        form controls, but it&rsquo;s published in case you want to create your own form control
+        which matches those of EUI. The examples below demonstrate its various states.
+      </p>
+    ),
+    props: {
+      EuiFormControlLayout,
+    },
+    demo: <FormControlLayout />,
   }],
 };
 

src/components/combo_box/__snapshots__/combo_box.test.js.snap

@@ -16,13 +16,14 @@ exports[`EuiComboBox is rendered 1`] = `
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
+    onCloseListClick={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={Array []}
     singleSelection={false}
+    toggleButtonRef={[Function]}
     updatePosition={[Function]}
     value=""
   />
@@ -44,9 +45,9 @@ exports[`props isClearable is false with selectedOptions 1`] = `
     isListOpen={false}
     onChange={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
+    onCloseListClick={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={
@@ -60,6 +61,7 @@ exports[`props isClearable is false with selectedOptions 1`] = `
       ]
     }
     singleSelection={false}
+    toggleButtonRef={[Function]}
     updatePosition={[Function]}
     value="Mimas, Iapetus"
   />
@@ -81,13 +83,14 @@ exports[`props isClearable is false without selectedOptions 1`] = `
     isListOpen={false}
     onChange={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
+    onCloseListClick={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={Array []}
     singleSelection={false}
+    toggleButtonRef={[Function]}
     updatePosition={[Function]}
     value=""
   />
@@ -110,9 +113,9 @@ exports[`props isDisabled 1`] = `
     isListOpen={false}
     onChange={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
+    onCloseListClick={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={
@@ -123,6 +126,7 @@ exports[`props isDisabled 1`] = `
       ]
     }
     singleSelection={false}
+    toggleButtonRef={[Function]}
     updatePosition={[Function]}
     value="Mimas"
   />
@@ -145,13 +149,14 @@ exports[`props options 1`] = `
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
+    onCloseListClick={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={Array []}
     singleSelection={false}
+    toggleButtonRef={[Function]}
     updatePosition={[Function]}
     value=""
   />
@@ -174,9 +179,9 @@ exports[`props selectedOptions 1`] = `
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
+    onCloseListClick={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={
@@ -190,6 +195,7 @@ exports[`props selectedOptions 1`] = `
       ]
     }
     singleSelection={false}
+    toggleButtonRef={[Function]}
     updatePosition={[Function]}
     value="Mimas, Iapetus"
   />
@@ -212,9 +218,9 @@ exports[`props singleSelection 1`] = `
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
+    onCloseListClick={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={
@@ -225,6 +231,7 @@ exports[`props singleSelection 1`] = `
       ]
     }
     singleSelection={true}
+    toggleButtonRef={[Function]}
     updatePosition={[Function]}
     value="Mimas"
   />