fix(autocomplete): should open on key input and close when key input is cleared (#12113)

**Related Issue:** #12096

## Summary

- opens the component when input is typed
- adds test

Author: driskull

packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts

@@ -861,4 +861,28 @@ describe("calcite-autocomplete", () => {
 
     expect(inputEvent).toHaveReceivedEventTimes(4);
   });
+
+  it("should open on input if text exists or close otherwise", async () => {
+    const page = await newE2EPage();
+    await page.setContent(simpleHTML);
+
+    const autocomplete = await page.find("calcite-autocomplete");
+    autocomplete.callMethod("setFocus");
+    await page.waitForChanges();
+
+    expect(await autocomplete.getProperty("open")).toBe(true);
+
+    autocomplete.setProperty("open", false);
+    await page.waitForChanges();
+
+    await page.keyboard.type("a");
+    await page.waitForChanges();
+
+    expect(await autocomplete.getProperty("open")).toBe(true);
+
+    await page.keyboard.press("Backspace");
+    await page.waitForChanges();
+
+    expect(await autocomplete.getProperty("open")).toBe(false);
+  });
 });

packages/calcite-components/src/components/autocomplete/autocomplete.tsx

@@ -750,6 +750,7 @@ export class Autocomplete
   private inputHandler(event: CustomEvent): void {
     event.stopPropagation();
     this.inputValue = (event.target as Input["el"]).value;
+    this.open = this.inputValue?.length > 0;
     this.calciteAutocompleteTextInput.emit();
   }
 

packages/calcite-components/src/demos/autocomplete.html

@@ -509,7 +509,6 @@ <h1 style="margin: 0; text-align: center">Autocomplete</h1>
         async function getSuggestions(locatorAutocomplete, suggestController) {
           const signal = suggestController.signal;
           removeOldItems(locatorAutocomplete);
-          locatorAutocomplete.open = true;
 
           const response = await suggestLocations(
             "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",