fixed input searching from google API

adobecom · May 14, 2024 · 0ebed2f · 0ebed2f
1 parent a6d1bc2
commit 0ebed2f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/blocks/form-handler/controllers/venue-info-component-controller.js b/blocks/form-handler/controllers/venue-info-component-controller.js
@@ -18,19 +18,18 @@ function loadGoogleMapsAPI(callback) {
 }
 
 function initAutocomplete(el) {
-  const venueName = el.querySelector('#venue-info-venue-name input');
+  const venueName = el.querySelector('#venue-info-venue-name');
   // eslint-disable-next-line no-undef
   if (!google) return;
   // eslint-disable-next-line no-undef
-  const autocomplete = new google.maps.places.Autocomplete(venueName);
-
-  console.log(el.cloneNode(true));
-  const address = el.querySelector('#venue-info-venue-address input');
-  const city = el.querySelector('#location-city input');
-  const state = el.querySelector('#location-state input');
-  const zip = el.querySelector('#location-zip-code input');
-  const country = el.querySelector('#location-country input');
-  const placeId = el.querySelector('#google-place-id input');
+  const autocomplete = new google.maps.places.Autocomplete(venueName.shadowRoot.querySelector('input'));
+
+  const address = el.querySelector('#venue-info-venue-address');
+  const city = el.querySelector('#location-city');
+  const state = el.querySelector('#location-state');
+  const zip = el.querySelector('#location-zip-code');
+  const country = el.querySelector('#location-country');
+  const placeId = el.querySelector('#google-place-id');
 
   autocomplete.setFields(['name', 'address_components', 'geometry', 'place_id']);
 

diff --git a/blocks/venue-info-component/venue-info-component.js b/blocks/venue-info-component/venue-info-component.js
@@ -114,6 +114,7 @@ function buildLocationInputGrid(row) {
           required: true,
           type: 'text',
           quiet: true,
+          size: 'l',
         }));
         break;
       case 1:
@@ -124,6 +125,7 @@ function buildLocationInputGrid(row) {
           required: true,
           type: 'text',
           quiet: true,
+          size: 'l',
         }));
         break;
       case 2:
@@ -134,6 +136,7 @@ function buildLocationInputGrid(row) {
           required: true,
           type: 'text',
           quiet: true,
+          size: 'l',
         }));
         break;
       case 3:
@@ -144,6 +147,7 @@ function buildLocationInputGrid(row) {
           required: true,
           type: 'text',
           quiet: true,
+          size: 'l',
         }));
         break;
       default:
@@ -158,11 +162,11 @@ function buildLocationInputGrid(row) {
   row.classList.add('venue-info-field-location');
 }
 
-export default async function init(el) {
+export default function init(el) {
   el.classList.add('form-component');
   generateToolTip(el);
   const miloLibs = getLibs();
-  await Promise.all([
+  Promise.all([
     import(`${miloLibs}/deps/lit-all.min.js`),
     import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
   ]);