diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index 7aedd5db5..046e76ebf 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -182331,6 +182331,34 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -182362,6 +182390,7 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
     role="group"
   >
     <button
+      aria-controls="from-listbox"
       aria-expanded={false}
       aria-label="Open the list of location suggestions"
       className="c1 c2"
@@ -182387,6 +182416,7 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
     <input
       aria-activedescendant={null}
       aria-autocomplete="list"
+      aria-controls="from-listbox"
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-invalid={false}
@@ -182405,6 +182435,13 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
       className="c6"
       role="status"
     />
+    <ul
+      aria-hidden={false}
+      aria-label="Suggested locations"
+      className="c7 c8"
+      id="from-listbox"
+      role="listbox"
+    />
   </div>
 </div>
 `;
@@ -182481,6 +182518,34 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -182502,6 +182567,7 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -182527,6 +182593,7 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -182545,6 +182612,13 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -182615,6 +182689,34 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -182636,6 +182738,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -182661,6 +182764,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -182679,6 +182783,13 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -182754,6 +182865,34 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -182775,6 +182914,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -182800,6 +182940,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -182818,6 +182959,13 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -182888,6 +183036,34 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -182909,6 +183085,7 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -182934,6 +183111,7 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -182952,6 +183130,13 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -183019,6 +183204,34 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -183040,6 +183253,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -183065,6 +183279,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -183085,6 +183300,13 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
   >
     otpUi.LocationField.currentLocationUnavailable
   </span>
+  <ul
+    aria-hidden={true}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -183171,6 +183393,34 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -183202,6 +183452,7 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
     role="group"
   >
     <button
+      aria-controls="from-listbox"
       aria-expanded={false}
       aria-label="Open the list of location suggestions"
       className="c1 c2"
@@ -183227,6 +183478,7 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
     <input
       aria-activedescendant={null}
       aria-autocomplete="list"
+      aria-controls="from-listbox"
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-invalid={false}
@@ -183245,6 +183497,13 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
       className="c6"
       role="status"
     />
+    <ul
+      aria-hidden={false}
+      aria-label="Suggested locations"
+      className="c7 c8"
+      id="from-listbox"
+      role="listbox"
+    />
   </div>
 </div>
 `;
@@ -183323,6 +183582,34 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -183344,6 +183631,7 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -183369,6 +183657,7 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={true}
@@ -183387,6 +183676,13 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -183474,6 +183770,34 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   width: 30px;
 }
 
+.c9 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -183495,6 +183819,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   role="group"
 >
   <button
+    aria-controls="to-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -183520,6 +183845,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="to-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -183559,6 +183885,13 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
     className="c7"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c8 c9"
+    id="to-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -183651,6 +183984,34 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   width: 30px;
 }
 
+.c9 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -183672,6 +184033,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   role="group"
 >
   <button
+    aria-controls="to-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -183697,6 +184059,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="to-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -183736,6 +184099,13 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
     className="c7"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c8 c9"
+    id="to-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -183793,7 +184163,44 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   color: #333;
 }
 
-.c6 {
+.c6 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+.c1 {
+  border: none;
+  background: none;
+}
+
+.c2 {
+  width: 30px;
+}
+
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
   display: inline-block;
@@ -183802,15 +184209,6 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   width: 0;
 }
 
-.c1 {
-  border: none;
-  background: none;
-}
-
-.c2 {
-  width: 30px;
-}
-
 .c5 {
   border: none;
   box-shadow: none;
@@ -183832,6 +184230,7 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -183857,6 +184256,7 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -183875,6 +184275,13 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -183951,6 +184358,34 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -183972,6 +184407,7 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -183997,6 +184433,7 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -184015,6 +184452,13 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -184103,6 +184547,34 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -184124,6 +184596,7 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -184149,6 +184622,7 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -184167,6 +184641,13 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -184809,6 +185290,34 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -184830,6 +185339,7 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -184855,6 +185365,7 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -184873,6 +185384,13 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -184980,6 +185498,34 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
   width: 30px;
 }
 
+.c8 {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.15);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  float: left;
+  font-size: 14px;
+  left: 0;
+  list-style: none;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000000;
+}
+
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -185001,6 +185547,7 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -185026,6 +185573,7 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
+    aria-controls="from-listbox"
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-invalid={false}
@@ -185044,6 +185592,13 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
     className="c6"
     role="status"
   />
+  <ul
+    aria-hidden={false}
+    aria-label="Suggested locations"
+    className="c7 c8"
+    id="from-listbox"
+    role="listbox"
+  />
 </div>
 `;
 
@@ -185119,7 +185674,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   width: 30px;
 }
 
-.c7 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185138,6 +185693,15 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -185153,7 +185717,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   position: relative;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185166,34 +185730,34 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c13 {
   float: left;
 }
 
-.c8 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -185205,7 +185769,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-19"
+    aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -185231,8 +185795,8 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-19"
-    aria-expanded={false}
+    aria-controls="from-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
@@ -185253,26 +185817,26 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c7 c8"
-    id="listbox-19"
+    className="c7 c8 c9"
+    id="from-listbox"
     role="listbox"
   >
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c12"
         >
           <span
-            className="c12"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -185296,7 +185860,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c14"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -185374,7 +185938,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   width: 30px;
 }
 
-.c7 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185393,6 +185957,15 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -185408,7 +185981,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   position: relative;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185421,34 +185994,34 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c13 {
   float: left;
 }
 
-.c8 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -185460,7 +186033,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-21"
+    aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -185486,8 +186059,8 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-21"
-    aria-expanded={false}
+    aria-controls="from-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
@@ -185508,26 +186081,26 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c7 c8"
-    id="listbox-21"
+    className="c7 c8 c9"
+    id="from-listbox"
     role="listbox"
   >
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c12"
         >
           <span
-            className="c12"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -185551,7 +186124,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c14"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -185634,7 +186207,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   width: 30px;
 }
 
-.c7 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185653,6 +186226,15 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -185668,7 +186250,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   position: relative;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185681,34 +186263,34 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c13 {
   float: left;
 }
 
-.c8 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -185720,7 +186302,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-22"
+    aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -185746,8 +186328,8 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-22"
-    aria-expanded={false}
+    aria-controls="from-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
@@ -185768,26 +186350,26 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c7 c8"
-    id="listbox-22"
+    className="c7 c8 c9"
+    id="from-listbox"
     role="listbox"
   >
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c12"
         >
           <span
-            className="c12"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -185811,7 +186393,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c14"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -185886,7 +186468,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   width: 30px;
 }
 
-.c7 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -185905,6 +186487,15 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -185920,7 +186511,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   position: relative;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -185933,34 +186524,34 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c13 {
   float: left;
 }
 
-.c8 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -185972,6 +186563,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   role="group"
 >
   <button
+    aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -185997,7 +186589,8 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-expanded={false}
+    aria-controls="from-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
@@ -186020,26 +186613,26 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
   <ul
     aria-hidden={true}
     aria-label="Suggested locations"
-    className="c7 c8"
-    id="listbox-20"
+    className="c7 c8 c9"
+    id="from-listbox"
     role="listbox"
   >
     <li
       aria-hidden={true}
-      className="c9"
+      className="c10"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={null}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c12"
         >
           <span
-            className="c12"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -186063,7 +186656,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c14"
           >
             otpUi.LocationField.currentLocationUnavailable
           </span>
@@ -186166,7 +186759,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   width: 30px;
 }
 
-.c8 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186185,6 +186778,15 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -186200,7 +186802,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   position: relative;
 }
 
-.c11 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186213,34 +186815,34 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c12 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c14 {
   float: left;
 }
 
-.c9 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186252,7 +186854,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-25"
+    aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -186278,8 +186880,8 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-25"
-    aria-expanded={false}
+    aria-controls="to-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
@@ -186321,26 +186923,26 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
-    id="listbox-25"
+    className="c8 c9 c10"
+    id="to-listbox"
     role="listbox"
   >
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -186364,7 +186966,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -186465,7 +187067,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   width: 30px;
 }
 
-.c8 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186484,6 +187086,15 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -186499,7 +187110,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   position: relative;
 }
 
-.c11 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186512,34 +187123,34 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   white-space: nowrap;
 }
 
-.c10:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c12 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c14 {
   float: left;
 }
 
-.c9 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186551,7 +187162,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   role="group"
 >
   <button
-    aria-controls="listbox-26"
+    aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -186577,8 +187188,8 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-26"
-    aria-expanded={false}
+    aria-controls="to-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
@@ -186620,26 +187231,26 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
-    id="listbox-26"
+    className="c8 c9 c10"
+    id="to-listbox"
     role="listbox"
   >
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -186663,7 +187274,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -186746,7 +187357,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   width: 30px;
 }
 
-.c7 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -186765,6 +187376,15 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -186780,7 +187400,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   position: relative;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -186793,34 +187413,34 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c11 {
+.c12 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c13 {
+.c14 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c12 {
+.c13 {
   float: left;
 }
 
-.c8 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -186832,7 +187452,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-23"
+    aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -186858,8 +187478,8 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-23"
-    aria-expanded={false}
+    aria-controls="from-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
@@ -186880,26 +187500,26 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c7 c8"
-    id="listbox-23"
+    className="c7 c8 c9"
+    id="from-listbox"
     role="listbox"
   >
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c12"
         >
           <span
-            className="c12"
+            className="c13"
             style={
               Object {
                 "color": null,
@@ -186923,7 +187543,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
             </svg>
           </span>
           <span
-            className="c13"
+            className="c14"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187013,7 +187633,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   width: 30px;
 }
 
-.c8 {
+.c9 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -187032,6 +187652,15 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c8 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c6 {
   border: none;
   box-shadow: none;
@@ -187047,7 +187676,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   position: relative;
 }
 
-.c11 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -187060,40 +187689,40 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c13 {
+.c14 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c15 {
+.c16 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c14 {
+.c15 {
   float: left;
 }
 
-.c9 {
+.c10 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c1 .c12 {
+.c1 .c13 {
   background-color: pink;
   font-size: 24px;
 }
@@ -187104,7 +187733,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-24"
+    aria-controls="from-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c2 c3"
@@ -187130,8 +187759,8 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-24"
-    aria-expanded={false}
+    aria-controls="from-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="from"
@@ -187152,26 +187781,26 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c8 c9"
-    id="listbox-24"
+    className="c8 c9 c10"
+    id="from-listbox"
     role="listbox"
   >
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12 c13"
+          className="c13 c14"
         >
           <span
-            className="c14"
+            className="c15"
             style={
               Object {
                 "color": null,
@@ -187195,7 +187824,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
             </svg>
           </span>
           <span
-            className="c15"
+            className="c16"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -187375,7 +188004,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   background: none;
 }
 
-.c16 {
+.c17 {
   clear: both;
 }
 
@@ -187383,7 +188012,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   width: 30px;
 }
 
-.c6 {
+.c7 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -187402,6 +188031,15 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c6 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c4 {
   border: none;
   box-shadow: none;
@@ -187417,7 +188055,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   position: relative;
 }
 
-.c10 {
+.c11 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -187430,7 +188068,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   white-space: nowrap;
 }
 
-.c8 {
+.c9 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -187442,60 +188080,60 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c10:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c9[aria-hidden="true"]:hover {
+.c10[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c17 {
+.c18 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c19 {
+.c20 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c18 {
+.c19 {
   float: left;
 }
 
-.c15 {
+.c16 {
   background-color: gray;
   color: white;
   padding: 2px 3px 0px;
   margin-right: 5px;
 }
 
-.c7 {
+.c8 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c13 {
+.c14 {
   margin-left: 30px;
 }
 
-.c12 {
+.c13 {
   font-size: 8px;
 }
 
-.c11 {
+.c12 {
   float: left;
   padding-top: 3px;
 }
 
-.c14 {
+.c15 {
   font-size: 9px;
 }
 
@@ -187505,7 +188143,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-37"
+    aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -187531,8 +188169,8 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-37"
-    aria-expanded={false}
+    aria-controls="to-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
@@ -187553,28 +188191,28 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c6 c7"
-    id="listbox-37"
+    className="c6 c7 c8"
+    id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c8"
+      className="c9"
     >
       otpUi.LocationField.nearby
     </h2>
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -187592,13 +188230,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             />
           </svg>
           <span
-            className="c12"
+            className="c13"
           >
             404 ft
           </span>
         </span>
         <span
-          className="c13"
+          className="c14"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -187609,33 +188247,33 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             )
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             <span
-              className="c15"
+              className="c16"
             >
               1
             </span>
           </span>
         </span>
         <div
-          className="c16"
+          className="c17"
         />
       </a>
     </li>
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c11"
+          className="c12"
         >
           <svg
             aria-hidden="true"
@@ -187653,13 +188291,13 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             />
           </svg>
           <span
-            className="c12"
+            className="c13"
           >
             0.2 mi
           </span>
         </span>
         <span
-          className="c13"
+          className="c14"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -187670,41 +188308,41 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             )
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             <span
-              className="c15"
+              className="c16"
             >
               2
             </span>
           </span>
         </span>
         <div
-          className="c16"
+          className="c17"
         />
       </a>
     </li>
     <h2
-      className="c8"
+      className="c9"
     >
       otpUi.LocationField.recentlySearched
     </h2>
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c18"
         >
           <span
-            className="c18"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -187728,7 +188366,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c20"
           >
             123 Main St
             
@@ -187737,26 +188375,26 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <h2
-      className="c8"
+      className="c9"
     >
       otpUi.LocationField.myPlaces
     </h2>
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-3"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c18"
         >
           <span
-            className="c18"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -187780,7 +188418,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c20"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -187788,21 +188426,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-4"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c18"
         >
           <span
-            className="c18"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -187826,7 +188464,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c20"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -187834,21 +188472,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-5"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c18"
         >
           <span
-            className="c18"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -187872,7 +188510,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c20"
           >
             Coffee Roasters Shop, 55 Coffee Street
           </span>
@@ -187880,21 +188518,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-6"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c18"
         >
           <span
-            className="c18"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -187918,7 +188556,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c20"
           >
             123 Main St
           </span>
@@ -187926,21 +188564,21 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
       </a>
     </li>
     <li
-      className="c9"
+      className="c10"
       role="none"
     >
       <a
-        className="c10"
+        className="c11"
         id="otpui-locf-option-7"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c17"
+          className="c18"
         >
           <span
-            className="c18"
+            className="c19"
             style={
               Object {
                 "color": null,
@@ -187964,7 +188602,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
             </svg>
           </span>
           <span
-            className="c19"
+            className="c20"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -188084,7 +188722,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   background: none;
 }
 
-.c17 {
+.c18 {
   clear: both;
 }
 
@@ -188092,7 +188730,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   width: 30px;
 }
 
-.c7 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -188111,6 +188749,15 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -188126,7 +188773,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   position: relative;
 }
 
-.c11 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -188139,7 +188786,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   white-space: nowrap;
 }
 
-.c9 {
+.c10 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -188151,60 +188798,60 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c18 {
+.c19 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c20 {
+.c21 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c19 {
+.c20 {
   float: left;
 }
 
-.c16 {
+.c17 {
   background-color: gray;
   color: white;
   padding: 2px 3px 0px;
   margin-right: 5px;
 }
 
-.c8 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
 }
 
-.c14 {
+.c15 {
   margin-left: 30px;
 }
 
-.c13 {
+.c14 {
   font-size: 8px;
 }
 
-.c12 {
+.c13 {
   float: left;
   padding-top: 3px;
 }
 
-.c15 {
+.c16 {
   font-size: 9px;
 }
 
@@ -188214,7 +188861,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-27"
+    aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -188240,8 +188887,8 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-27"
-    aria-expanded={false}
+    aria-controls="to-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
@@ -188262,28 +188909,28 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c7 c8"
-    id="listbox-27"
+    className="c7 c8 c9"
+    id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c9"
+      className="c10"
     >
       otpUi.LocationField.nearby
     </h2>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <svg
             aria-hidden="true"
@@ -188301,13 +188948,13 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             />
           </svg>
           <span
-            className="c13"
+            className="c14"
           >
             404 ft
           </span>
         </span>
         <span
-          className="c14"
+          className="c15"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188318,33 +188965,33 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             )
           </span>
           <span
-            className="c15"
+            className="c16"
           >
             <span
-              className="c16"
+              className="c17"
             >
               1
             </span>
           </span>
         </span>
         <div
-          className="c17"
+          className="c18"
         />
       </a>
     </li>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <svg
             aria-hidden="true"
@@ -188362,13 +189009,13 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             />
           </svg>
           <span
-            className="c13"
+            className="c14"
           >
             0.2 mi
           </span>
         </span>
         <span
-          className="c14"
+          className="c15"
         >
           <span
             className="styled__StopName-sc-xahsq2-20"
@@ -188379,36 +189026,36 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             )
           </span>
           <span
-            className="c15"
+            className="c16"
           >
             <span
-              className="c16"
+              className="c17"
             >
               2
             </span>
           </span>
         </span>
         <div
-          className="c17"
+          className="c18"
         />
       </a>
     </li>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c18"
+          className="c19"
         >
           <span
-            className="c19"
+            className="c20"
             style={
               Object {
                 "color": null,
@@ -188432,7 +189079,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
             </svg>
           </span>
           <span
-            className="c20"
+            className="c21"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -188531,7 +189178,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   width: 30px;
 }
 
-.c7 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -188550,6 +189197,15 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -188565,7 +189221,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   position: relative;
 }
 
-.c11 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -188578,7 +189234,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   white-space: nowrap;
 }
 
-.c9 {
+.c10 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -188590,34 +189246,34 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c12 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c14 {
   float: left;
 }
 
-.c8 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -188629,7 +189285,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-30"
+    aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -188655,8 +189311,8 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-30"
-    aria-expanded={false}
+    aria-controls="to-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
@@ -188677,31 +189333,31 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c7 c8"
-    id="listbox-30"
+    className="c7 c8 c9"
+    id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c9"
+      className="c10"
     >
       otpUi.LocationField.recentlySearched
     </h2>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -188725,7 +189381,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             123 Main St
             
@@ -188734,21 +189390,21 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -188772,7 +189428,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
@@ -188894,7 +189550,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   width: 30px;
 }
 
-.c7 {
+.c8 {
   background-clip: padding-box;
   background-color: #fff;
   border-radius: 4px;
@@ -188913,6 +189569,15 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   z-index: 1000000;
 }
 
+input[aria-expanded="false"] ~ .c7 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  display: inline-block;
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 .c5 {
   border: none;
   box-shadow: none;
@@ -188928,7 +189593,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   position: relative;
 }
 
-.c11 {
+.c12 {
   background-color: transparent;
   clear: both;
   color: #333;
@@ -188941,7 +189606,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   white-space: nowrap;
 }
 
-.c9 {
+.c10 {
   color: #eee;
   background-color: #333;
   font-size: 12px;
@@ -188953,34 +189618,34 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
+.c11:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }
 
-.c10[aria-hidden="true"]:hover {
+.c11[aria-hidden="true"]:hover {
   background-color: unset;
   cursor: default;
 }
 
-.c12 {
+.c13 {
   display: block;
   padding-top: 5px;
   padding-bottom: 3px;
 }
 
-.c14 {
+.c15 {
   margin-left: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.c13 {
+.c14 {
   float: left;
 }
 
-.c8 {
+.c9 {
   border: none;
   box-shadow: none;
   display: block;
@@ -188992,7 +189657,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   role="group"
 >
   <button
-    aria-controls="listbox-32"
+    aria-controls="to-listbox"
     aria-expanded={true}
     aria-label="Open the list of location suggestions"
     className="c1 c2"
@@ -189018,8 +189683,8 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   <input
     aria-activedescendant={null}
     aria-autocomplete="list"
-    aria-controls="listbox-32"
-    aria-expanded={false}
+    aria-controls="to-listbox"
+    aria-expanded={true}
     aria-haspopup="listbox"
     aria-invalid={false}
     aria-label="to"
@@ -189040,31 +189705,31 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
   <ul
     aria-hidden={false}
     aria-label="Suggested locations"
-    className="c7 c8"
-    id="listbox-32"
+    className="c7 c8 c9"
+    id="to-listbox"
     role="listbox"
   >
     <h2
-      className="c9"
+      className="c10"
     >
       otpUi.LocationField.myPlaces
     </h2>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-0"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189088,7 +189753,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -189096,21 +189761,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-1"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189134,7 +189799,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             otpUi.LocationField.parenthesisFormat
           </span>
@@ -189142,21 +189807,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-2"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189180,7 +189845,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             Coffee Roasters Shop, 55 Coffee Street
           </span>
@@ -189188,21 +189853,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-3"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189226,7 +189891,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             123 Main St
           </span>
@@ -189234,21 +189899,21 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
       </a>
     </li>
     <li
-      className="c10"
+      className="c11"
       role="none"
     >
       <a
-        className="c11"
+        className="c12"
         id="otpui-locf-option-4"
         onClick={[Function]}
         role="option"
         tabIndex={-1}
       >
         <span
-          className="c12"
+          className="c13"
         >
           <span
-            className="c13"
+            className="c14"
             style={
               Object {
                 "color": null,
@@ -189272,7 +189937,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
             </svg>
           </span>
           <span
-            className="c14"
+            className="c15"
           >
             otpUi.LocationField.useCurrentLocation
           </span>
diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx
index 8753592ff..28e7f0b2f 100644
--- a/packages/location-field/src/index.tsx
+++ b/packages/location-field/src/index.tsx
@@ -195,7 +195,9 @@ const LocationField = ({
     return location && !hideExistingValue ? label : "";
   };
 
-  const listBoxId = `listbox-${optionKey}`;
+  const formControlClassname = `${locationType}-form-control`;
+
+  const listBoxId = `${locationType}-listbox`;
 
   const intl = useIntl();
 
@@ -346,10 +348,6 @@ const LocationField = ({
       });
   });
 
-  const getFormControlClassname = () => {
-    return `${locationType}-form-control`;
-  };
-
   const setLocation = (newLocation: Location, resultType: ResultType) => {
     onLocationSelected({
       location: newLocation,
@@ -868,12 +866,8 @@ const LocationField = ({
     currentPosition && currentPosition.fetching
       ? intl.formatMessage({ id: "otpUi.LocationField.fetchingLocation" })
       : defaultPlaceholder;
-  const shouldRenderList = isStatic || menuVisible;
   const hasNoEnabledOptions = menuItemCount === 0;
-  // Only populate the aria-controls fields if the suggestion list is shown
-  // and the list has an enabled option.
-  const controlledId =
-    shouldRenderList && !hasNoEnabledOptions ? listBoxId : undefined;
+  const isExpanded = isStatic || menuVisible;
 
   const textControl = (
     <S.Input
@@ -881,14 +875,14 @@ const LocationField = ({
         activeIndex !== null ? getOptionId(activeIndex) : null
       }
       aria-autocomplete="list"
-      aria-controls={controlledId}
-      aria-expanded={menuVisible}
+      aria-controls={listBoxId}
+      aria-expanded={isExpanded}
       aria-haspopup="listbox"
       aria-invalid={!isValid}
       aria-label={defaultPlaceholder}
       aria-required={isRequired}
       autoFocus={autoFocus}
-      className={getFormControlClassname()}
+      className={formControlClassname}
       onChange={onTextInputChange}
       onClick={handleTextInputClick}
       onKeyDown={onKeyDown}
@@ -918,8 +912,8 @@ const LocationField = ({
   return (
     <S.InputGroup className={className} onBlur={onBlurFormGroup} role="group">
       <S.DropdownButton
-        aria-controls={controlledId}
-        aria-expanded={shouldRenderList}
+        aria-controls={listBoxId}
+        aria-expanded={isExpanded}
         aria-label={intl.formatMessage({
           defaultMessage: "Open the list of location suggestions",
           description:
@@ -943,35 +937,33 @@ const LocationField = ({
           value={statusMessages}
         />
       </S.HiddenContent>
-      {shouldRenderList && (
-        <ItemList
-          // Hide the list from screen readers if no enabled options are shown.
-          aria-hidden={hasNoEnabledOptions}
-          aria-label={intl.formatMessage({
-            defaultMessage: "Suggested locations",
-            description:
-              "Text to show as a label for the dropdown list of locations",
-            id: "otpUi.LocationField.suggestedLocations"
-          })}
-          id={listBoxId}
-        >
-          {isStatic ? (
-            menuItems.length > 0 ? ( // Show typing prompt to avoid empty screen
-              menuItems
-            ) : (
-              <S.MenuGroupHeader as="div">
-                <FormattedMessage
-                  defaultMessage="Begin typing to search for locations"
-                  description="Text to show as initial placeholder in location search field"
-                  id="otpUi.LocationField.beginTypingPrompt"
-                />
-              </S.MenuGroupHeader>
-            )
+      <ItemList
+        // Hide the list from screen readers if no enabled options are shown.
+        aria-hidden={hasNoEnabledOptions}
+        aria-label={intl.formatMessage({
+          defaultMessage: "Suggested locations",
+          description:
+            "Text to show as a label for the dropdown list of locations",
+          id: "otpUi.LocationField.suggestedLocations"
+        })}
+        id={listBoxId}
+      >
+        {isStatic ? (
+          menuItems.length > 0 ? ( // Show typing prompt to avoid empty screen
+            menuItems
           ) : (
-            menuVisible && menuItems
-          )}
-        </ItemList>
-      )}
+            <S.MenuGroupHeader as="div">
+              <FormattedMessage
+                defaultMessage="Begin typing to search for locations"
+                description="Text to show as initial placeholder in location search field"
+                id="otpUi.LocationField.beginTypingPrompt"
+              />
+            </S.MenuGroupHeader>
+          )
+        ) : (
+          menuVisible && menuItems
+        )}
+      </ItemList>
     </S.InputGroup>
   );
 };
diff --git a/packages/location-field/src/styled.ts b/packages/location-field/src/styled.ts
index 4e554c0d6..88756f657 100644
--- a/packages/location-field/src/styled.ts
+++ b/packages/location-field/src/styled.ts
@@ -1,7 +1,7 @@
-import styled, { keyframes } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import { Spinner as FASpinner } from "@styled-icons/fa-solid/Spinner";
 
-export const HiddenContent = styled.span`
+const hiddenCss = css`
   clip: rect(0, 0, 0, 0);
   display: inline-block;
   height: 0;
@@ -9,6 +9,10 @@ export const HiddenContent = styled.span`
   width: 0;
 `;
 
+export const HiddenContent = styled.span`
+  ${hiddenCss}
+`;
+
 export const BaseButton = styled.button`
   border: none;
   background: none;
@@ -48,6 +52,11 @@ export const MenuItemList = styled.ul.attrs({
   top: 100%;
   /* this is an annoyingly high number, but is needed to be on top of some otp-rr components */
   z-index: 1000000;
+
+  /* If the associated input is not in an expanded state, hide the list. */
+  input[aria-expanded="false"] ~ & {
+    ${hiddenCss}
+  }
 `;
 
 export const Input = styled.input`