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)}
   />
   );
   }

3. Open the ASelect
4. Type in a value into the ATextInput
5. Click on the close icon to clear the input
6. 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.