Fix allowing suggestions drop to close when click occurs on layer

[halocline]

What does this PR do?

Closes #6565

Where should the reviewer start?

TextInput.js

What testing has been done on this PR?

Storybook using the following:

/* eslint-disable arrow-body-style */
import { FormClose, Search } from 'grommet-icons';
import React from 'react';
import {
  Box,
  Button,
  Header,
  Heading,
  Layer,
  Paragraph,
  TextInput,
} from '../..';

const allSuggestions = ['Apples', 'Oranges', 'Bananas'];

export const Temp = () => {
  const bodyRef = React.useRef();
  const [show, setShow] = React.useState(false);

  // Initializing layer as open for demo purposes.
  React.useEffect(() => {
    setShow(true);
  }, []);

  return (
    <Box height="100vh">
      <Header background="background-contrast" pad="small" justify="evenly">
        <SearchBar background="background-front" />
      </Header>
      <Box ref={bodyRef} background="background-front" fill />
      {show && (
        <Layer
          target={bodyRef.current}
          position="top"
          full
          modal
          margin="medium"
        >
          <Box as="section" pad="medium">
            <Header>
              <Heading level={2} margin="none">
                Search results layer
              </Heading>
              <Button icon={<FormClose />} onClick={() => setShow(false)} />
            </Header>
            <Paragraph>
              Place focus on the search input, then click on the layer.
              Previously, the suggestions drop would not close when a click
              occurred on the layer. A click on the layer should now close the
              drop.
            </Paragraph>
          </Box>
        </Layer>
      )}
    </Box>
  );
};

const SearchBar = ({ ...rest }) => {
  const [value, setValue] = React.useState('');
  const [suggestions, setSuggestions] = React.useState(allSuggestions);

  const onChange = (event) => {
    const nextValue = event.target.value;
    setValue(nextValue);
    if (!nextValue) setSuggestions(allSuggestions);
    else {
      const regexp = new RegExp(`^${nextValue}`);
      setSuggestions(allSuggestions.filter((s) => regexp.test(s)));
    }
  };

  return (
    <Box width={{ min: 'medium', max: '33%' }} {...rest}>
      <TextInput
        placeholder="Search..."
        value={value}
        onChange={onChange}
        suggestions={suggestions}
        icon={<Search />}
        reverse
      />
    </Box>
  );
};

export default {
  title: 'Input/TextInput/Temp',
};

How should this be manually tested?

Storybook

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• userEvent is used in place of fireEvent.
• asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

#6565

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No

Should this PR be mentioned in the release notes?

Yes.

Is this change backwards compatible or is it a breaking change?

Backwards compatible.

[jcfilben]

This solution is working but I'm wondering if we should be adjusting the way onClickDocument is working in DropContainer so that we can prevent this issue from happening in any component that uses a Drop. Currently onClickDocument doesn't trigger onClickOutside if a click is outside the drop but within a portal.

[halocline]

This solution is working but I'm wondering if we should be adjusting they way onClickDocument is working in DropContainer so that we can prevent this issue from happening in any component that uses a Drop. Currently onClickDocument doesn't trigger onClickOutside if a click is outside the drop but within a portal.

I'll check that out.

[jcfilben]

I think we might also need to check if clickedPortal is a child of dropRef.current. If you look at the Drop/Multiple story, there are examples of a drop within a drop. Clicking within the child drop closes the parent drop.