adds close on blur and moves position of hidden hint text

CHANGELOG.md

@@ -31,6 +31,7 @@
 - [Autocomplete - Add option to show all values](https://github.com/Capgemini/dcx-react-library/issues/292)
 - [Button - should allow to pass an html content](https://github.com/Capgemini/dcx-react-library/issues/563)
 - [Checkbox - add error state](https://github.com/Capgemini/dcx-react-library/issues/581)
+- [Autocomplete - Adds close on blur and moves accessibility status text to new location](https://github.com/Capgemini/dcx-react-library/pull/643)
 
 **A11y**
 
@@ -77,38 +78,40 @@
 
 <a name="0.8.0"></a>
 
-[Autocomplete - changing defaultValue prop has no affect](https://github.com/Capgemini/dcx-react-library/issues/455)
-[Autocomplete - doesn't auto scroll for filtered list on keydown](https://github.com/Capgemini/dcx-react-library/issues/470)
-[Button - add new properties](https://github.com/Capgemini/dcx-react-library/issues/466)
-[Tabs - non-js compliant](https://github.com/Capgemini/dcx-react-library/issues/283)
+- [Autocomplete - changing defaultValue prop has no affect](https://github.com/Capgemini/dcx-react-library/issues/455)
+- [Autocomplete - doesn't auto scroll for filtered list on keydown](https://github.com/Capgemini/dcx-react-library/issues/470)
+- [Button - add new properties](https://github.com/Capgemini/dcx-react-library/issues/466)
+- [Tabs - non-js compliant](https://github.com/Capgemini/dcx-react-library/issues/283)
 
 **New components**
-[Code Snippet](https://github.com/Capgemini/dcx-react-library/issues/500)
-[Breadcrumbs](https://github.com/Capgemini/dcx-react-library/issues/415)
-[Preformatted Text](https://github.com/Capgemini/dcx-react-library/issues/503)
-[Abbreviate](https://github.com/Capgemini/dcx-react-library/issues/497)
-[Highlight](https://github.com/Capgemini/dcx-react-library/issues/498)
-[List item](https://github.com/Capgemini/dcx-react-library/issues/453)
-[Blockquote](https://github.com/Capgemini/dcx-react-library/issues/499)
-[Keyboard Shortcut](https://github.com/Capgemini/dcx-react-library/issues/501)
-[Paragraph](https://github.com/Capgemini/dcx-react-library/issues/455)
-[Insert Text](https://github.com/Capgemini/dcx-react-library/issues/452)
-[Link](https://github.com/Capgemini/dcx-react-library/issues/467)
-[Label](https://github.com/Capgemini/dcx-react-library/issues/466)
-[Heading](https://github.com/Capgemini/dcx-react-library/issues/450)
+
+- [Code Snippet](https://github.com/Capgemini/dcx-react-library/issues/500)
+- [Breadcrumbs](https://github.com/Capgemini/dcx-react-library/issues/415)
+- [Preformatted Text](https://github.com/Capgemini/dcx-react-library/issues/503)
+- [Abbreviate](https://github.com/Capgemini/dcx-react-library/issues/497)
+- [Highlight](https://github.com/Capgemini/dcx-react-library/issues/498)
+- [List item](https://github.com/Capgemini/dcx-react-library/issues/453)
+- [Blockquote](https://github.com/Capgemini/dcx-react-library/issues/499) -[Keyboard Shortcut](https://github.com/Capgemini/dcx-react-library/issues/501)
+- [Paragraph](https://github.com/Capgemini/dcx-react-library/issues/455)
+- [Insert Text](https://github.com/Capgemini/dcx-react-library/issues/452)
+- [Link](https://github.com/Capgemini/dcx-react-library/issues/467)
+- [Label](https://github.com/Capgemini/dcx-react-library/issues/466)
+- [Heading](https://github.com/Capgemini/dcx-react-library/issues/450)
 
 **Documentation**
-[clientOnly](https://github.com/Capgemini/dcx-react-library/issues/459)
-[Storybook - v7](https://github.com/Capgemini/dcx-react-library/issues/473)
+
+- [clientOnly](https://github.com/Capgemini/dcx-react-library/issues/459)
+- [Storybook - v7](https://github.com/Capgemini/dcx-react-library/issues/473)
 
 **Design system - not publicly available yet... stay tuned ;)**
-[Button](https://github.com/Capgemini/dcx-react-library/issues/468)
-[Select](https://github.com/Capgemini/dcx-react-library/issues/469)
-[List Item](https://github.com/Capgemini/dcx-react-library/issues/487)
-[Heading](https://github.com/Capgemini/dcx-react-library/issues/484)
-[Insert Text](https://github.com/Capgemini/dcx-react-library/issues/486)
-[Paragraph](https://github.com/Capgemini/dcx-react-library/issues/488)
-[Label](https://github.com/Capgemini/dcx-react-library/issues/485)
+
+- [Button](https://github.com/Capgemini/dcx-react-library/issues/468)
+- [Select](https://github.com/Capgemini/dcx-react-library/issues/469)
+- [List Item](https://github.com/Capgemini/dcx-react-library/issues/487)
+- [Heading](https://github.com/Capgemini/dcx-react-library/issues/484)
+- [Insert Text](https://github.com/Capgemini/dcx-react-library/issues/486)
+- [Paragraph](https://github.com/Capgemini/dcx-react-library/issues/488)
+- [Label](https://github.com/Capgemini/dcx-react-library/issues/485)
 
 ## 0.7.0 (27/03/2023)
 

src/autocomplete/Autocomplete.tsx

@@ -468,6 +468,7 @@ export const Autocomplete = ({
 
   const onBlur = () => {
     setShowPrompt(false);
+    setShowOptions(false);
   };
 
   const setAccessibilityStatus = (newStatus: string) => {
@@ -621,6 +622,37 @@ export const Autocomplete = ({
             visuallyHiddenText={errorVisuallyHiddenText}
           />
         )}
+      <div
+        style={{
+          border: '0px',
+          clip: 'rect(0px, 0px, 0px, 0px)',
+          height: '1px',
+          marginBottom: '-1px',
+          marginRight: '-1px',
+          overflow: 'hidden',
+          padding: '0px',
+          position: 'absolute',
+          whiteSpace: 'nowrap',
+          width: '1px',
+        }}
+      >
+        <div
+          id={`autocomplete-status-${id}-A`}
+          role="status"
+          aria-atomic="true"
+          aria-live="polite"
+        >
+          {accessibilityStatusA}
+        </div>
+        <div
+          id={`autocomplete-status-${id}-B`}
+          role="status"
+          aria-atomic="true"
+          aria-live="polite"
+        >
+          {accessibilityStatusB}
+        </div>
+      </div>
       {!hydrated ? (
         <FormSelect
           name={name || 'select'}
@@ -646,37 +678,6 @@ export const Autocomplete = ({
         />
       )}
       <div className={containerClassName} style={{ ...searchContainerStyle }}>
-        <div
-          style={{
-            border: '0px',
-            clip: 'rect(0px, 0px, 0px, 0px)',
-            height: '1px',
-            marginBottom: '-1px',
-            marginRight: '-1px',
-            overflow: 'hidden',
-            padding: '0px',
-            position: 'absolute',
-            whiteSpace: 'nowrap',
-            width: '1px',
-          }}
-        >
-          <div
-            id={`autocomplete-status-${id}-A`}
-            role="status"
-            aria-atomic="true"
-            aria-live="polite"
-          >
-            {accessibilityStatusA}
-          </div>
-          <div
-            id={`autocomplete-status-${id}-B`}
-            role="status"
-            aria-atomic="true"
-            aria-live="polite"
-          >
-            {accessibilityStatusB}
-          </div>
-        </div>
         {searchEl}
         {displayResultList() && (
           <ResultList

src/autocomplete/__tests__/Autocomplete.test.tsx

@@ -1247,4 +1247,71 @@ describe('Autocomplete', () => {
     expect(change.mock.calls[3][1]).toBe('');
     expect(change.mock.calls[3][2]).toBe(0);
   });
+
+  it('should close the options list on blur', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <Autocomplete
+        options={[
+          'Papaya',
+          'Persimmon',
+          'Paw Paw',
+          'Prickly Pear',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+        ]}
+        id="fruitTest"
+        labelText="search the list of fruits"
+        notFoundText="No fruit found"
+        resultId="fruit-options-container"
+        optionsId="fruit-option"
+      />
+    );
+
+    const inputElm = screen.getByRole('combobox');
+    await user.type(inputElm, 'p');
+    expect(screen.getAllByRole('option').length).toBe(7);
+
+    act(() => {
+      fireEvent.blur(inputElm);
+    });
+    const options: any = container.querySelector('li');
+    expect(options).not.toBeInTheDocument();
+  });
+
+  it('should make sure status container is in the correct position', async () => {
+    const change = jest.fn();
+    const hint =
+      'When autocomplete results are available use up and down arrows to review and enter to select.';
+    const { container } = render(
+      <Autocomplete
+        options={[
+          'Papaya',
+          'Persimmon',
+          'Paw Paw',
+          'Prickly Pear',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+        ]}
+        id="fruitTest"
+        labelText="search the list of fruits"
+        notFoundText="No fruit found"
+        resultId="fruit-options-container"
+        optionsId="fruit-option"
+        statusUpdate={(length, property, position) => {
+          change(length, property, position);
+        }}
+        accessibilityStatus="status message"
+        accessibilityHintText={hint}
+      />
+    );
+
+    let statusElements = screen.getAllByRole('status');
+    expect(statusElements.length).toBe(2);
+    expect(
+      container.querySelector('label + div > div[role="status"]')
+    ).toBeInTheDocument();
+  });
 });