Clearing ATextInput when inside of a ASelect closes the dropdown

[radesai21]

Describe the bug
When the clear button inside of a ATextInput is clicked, it will close the ASelect dropdown.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://atomic-react.vercel.app/components/select#prependappend-content
2. Replace code snip with:

() => {
  const [role, setRole] = useState(null);
  const [value, setValue] = useState('');
  return (
    <ASelect
      prependContent={<AListItem twoLine className="my-1 mx-2"><ATextInput prependIcon="search" clearable={Boolean(value)} value={value} onChange={(e) => setValue(e.target.value)}/></AListItem>}
      appendContent={<><ADivider className="ma-0" /><AListItem><AIcon size={12} left>add</AIcon>Add Role</AListItem></>}
      items={[
        {value: 1, text: "Read"},
        {value: 2, text: "Write"},
        {value: 3, text: "Admin"}
      ]}
      label="Role"
      onSelected={(item) => setRole(item)}
    />
  );
}

4. Open the ASelect
5. Type in a value into the ATextInput
6. Click on the close icon to clear the input
7. Notice that it closes the entire dropdown

Expected behavior
The ASelect dropdown should stay open after clicking the clear button in the text input.

Screenshots
https://user-images.githubusercontent.com/95231401/182444243-3b7aa186-6082-49fd-88e7-cdbd9eba0e31.mov

Environment (please complete the following information):

• Device: Macbook
• OS: All
• Browser: Chrome, Safari, FF
• Version: 3.1.2

Additional context
This only happens when the clearable prop changes. If the prop is set to a static clearable={true} or clearable then the dropdown stays open. It's only when we try to dynamically hide & show depending on the input value.