Algolia places branding is breaking

Open Q&A
#1

I want to retain the original style of the input with algolia places. When I am removing ap-input class, the branding style is breaking.

image
image1207×419 26.7 KB

Also tried by not removing ap-input class

#2

Hi! Could you please provide a link to the page exhibiting the issue?
Thank you!

#3

Since this application is paid service. I can’t share the access to development environment with you guys.

You want snippets. I can give you

// algoliainit.js
export function initAlgolia(id) {
  const node = document.getElementById(id);
  if (!node || node.tagName.toLowerCase() != 'input') {
    throw new TypeError('Algolia expects an existing input field');
  }

  const mutation = new MutationObserver(() => {
    if (node.classList.contains('ap-input')) {
      node.classList.remove('ap-input');
      mutation.disconnect();
    }
  });
  mutation.observe(node, { attributeFilter: ['class'], attributeOldValue: true, attributes: true });

  return window
    .places({
      appId: 'pl72GOB1JU88',
      apiKey: '6cb26a9b5c7c28b4ece55f0652d865e3',
      container: node
    })
    .configure({ useDeviceLocation: true });
}

Usage in the calling the function on the page

// app.vue
this.algoliaInstance = initAlgolia('iaddr');

The HTML Input field

// app.vue
<input data-v-12f7370a="" placeholder="Enter Address" spellcheck="false" required="required" label="Address Line" id="iaddr" autocomplete="off" class="input-field" role="combobox" aria-autocomplete="both" aria-expanded="false" aria-owns="algolia-places-listbox-0" dir="auto" style="position: relative; vertical-align: top;">

CSS Style for Input

/* style.css */
.bill-input .input-field[data-v-12f7370a] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    display: block;
    line-height: 1.375;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 100%;
    background: #f9f9f9;
    border: 1px solid rgba(7, 32, 56, 0.1);
    color: #072038;
    font-size: 16px;
    transition: all 0.5s ease;
    caret-color: #3281f7;
}
.bill-input .input-field[data-v-12f7370a]:focus {
    box-shadow: none;
    outline: 0;
    border-color: #3281f7;
    background: hsla(0, 0%, 97.6%, 0.5);
}
.bill-input .input-field[data-v-12f7370a]:-webkit-autofill,
.bill-input .input-field[data-v-12f7370a]:-webkit-autofill:focus,
.bill-input .input-field[data-v-12f7370a]:-webkit-autofill:hover {
    border: 1px solid rgba(7, 32, 56, 0.1);
    -webkit-text-fill-color: #072038;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.bill-input .input-field[data-v-12f7370a]:-webkit-autofill:first-line {
    font-family: Inter, sans-serif;
    color: #072038;
    font-size: 16px;
    line-height: 1.375;
}
#4

Hi,
considering that Places is being sunset in May 2022, you can use this “hack” as a temporary measure to fix your styling while looking for an alternative:

places({
  appID: ...,
  apiKey: ...,
  templates: { footer: '' }, // add this
})

This solution is not compliant with our TOU but it should solve your issue.