geocodeearth / autocomplete-element Goto Github PK

When running npm install on the repo I'm getting an "Incorrect or missing password" error from npm.

Deleting the package-lock.json file resolves the issue and allows me to install the dependencies.

/code/ge/autocomplete-element main ❯ git log -1 
commit 581c95f8d1ff6f81a9effb1fdf819afaf9b98599 (HEAD -> main, tag: v0.0.9, origin/main, origin/HEAD)

/code/ge/autocomplete-element main ❯ npm install
npm ERR! code E401
npm ERR! Incorrect or missing password.
npm ERR! If you were trying to login, change your password, create an
npm ERR! authentication token or enable two-factor authentication then
npm ERR! that means you likely typed your password in incorrectly.
npm ERR! Please try again, or recover your password at:
npm ERR!     https://www.npmjs.com/forgot
npm ERR!
npm ERR! If you were doing some other operation then your saved credentials are
npm ERR! probably out of date. To correct this please try logging in again with:
npm ERR!     npm login

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/peter/.npm/_logs/2021-06-22T11_57_29_872Z-debug.log

Events

For now I have only implemented a single event, select, which is fired when the user selects a suggested item in the autocomplete. What other events (if any) do we want to fire?

Possible options/suggestions:

• every time a list of results comes back (similar to onChange but with all results)
• when no results are found
• for errors (rate limiting & network errors)
• as the user types (onChange basically)

Customization

I have implemented all autocomplete API params, but I think we should add a couple more customization options, more specifically:

• placeholder text for the input field
• debounce time (currently set to 300 ms)
• autofocus

Do we need anything else to be customizable? This excludes visual changes like styling, dark mode, icons, etc, see below

Transitions / Animations

Do we want to add any of this? Notably Algolia Places does not have any either. I personally like not having animations as they very easily make the UI feel sluggish.

Clear button

We could add a little x button on the right to clear the input field.

Loading spinner

We could add a spinner animation for when the component is fetching results (#2)

No results

We don’t currently show a "no results found" message (and neither does the algolia places demo). Is this necessary?

Icons for different result types

Briefly discussed in Slack, we could vary the icon next to a result depending on its type. For example a train for train stations, a city for cities, etc.

Use browser location

We could allow using the user’s location through the browser API as is implemented in the component on our website.

Potential features after release

• style customization (either fully through CSS or maybe through themes)
• dark mode support for default theme

autofocus attribute

• We should pass down the autofocus attribute as is expected for text input fields

add request header with component version

we could add a header to every request which would contain the version of the autocomplete component, which we could use to gain some insight into how many requests are made using the component as well if people upgrade the version etc

failed to get the value of input

use-deep-compare-effect.esm.js:10 Uncaught Error: useDeepCompareEffect should not be used with dependencies that are all primitive values. Use React.useEffect instead.
    at checkDeps (use-deep-compare-effect.esm.js:10:11)
    at useDeepCompareEffect (use-deep-compare-effect.esm.js:32:5)
    at autocomplete_default3 (autocomplete.js:46:3)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)
    at beginWork (react-dom.development.js:19049:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at beginWork$1 (react-dom.development.js:23964:7)

Appears to be introduced in 9f7d82b

@mxlje do you know why this used to work but now doesn't? I tried pinning earlier versions of use-deep-compare-effect without success.

I've been playing around with doing some zany visual customisation which highlighted some minor issues with the templating/css vars.

None of this is urgent to fix, I'm just writing it down here so I don't forget ;)

• currently there is no way of completely disabling the placeholder text, a workaround is to use a single space " "
• when using custom 'row' templates the <li> no longer has the result-item and result-item-active classes, this makes it difficult/impossible to style the full width/height background-color of each row. [edit] this was my fault
• allow implementing white-space: nowrap; overflow: hidden; with optional text-overflow: ellipsis;, this is not possible by default, it can be achieved with row templates but requires nesting an additional <span> otherwise the icon width throws off the ellipsis calc. It would be even better if this didn't require using the private API

Today I was trying to write some new examples of customizing the autocomplete element, and wanted to provide examples that slightly modified either the string or (especially) row templates.

This turns out to be pretty hard, because the default templates are not written in plain HTML, as a custom template would be, but instead directly in a React component.

For the row template, I settled on the following HTML, which is probably close but not quite right:

  <template row>                                                                                                                                                                                            
    <li class="result-item">                                                                                                       
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"                                                                                                                         
    class="result-item-icon"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10                                                                                                                     
    18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"                                                                                                                                          
    clip-rule="evenodd"></path></svg>                                                                                                                                                                       
      ${item.feature.properties.label}                                                                                                                                                                      
    </li>                                                                                                                                                                                                   
  </template>        

If its not too difficult, we might want to provide a good starting point for customization in our docs.

If I remove the __host param it doesn’t seem to set the default domain

The first keypress(es) do not generate requests until after the debounceWait period has passed.
I noticed in testing that responses were coming back in 140ms but the UI was taking ~1s to refresh.

This can be reproduced in development by setting debounceWait to a higher interval such as 5000.

There is a user-experience tradeoff to be made here, on one hand single character specificity usually won't yield relevant results, on the other hand the initial delay makes the interface feel slow.

empty data attributes generate empty querystring params, eg:

<ge-autocomplete sources="" /> will add ?sources= to the querystring.

use of this library from templating is easier if the data attributes are always rendered in the HTML but only populated when required.

this ticket is to investigate solutions to detecting empty data attributes and avoiding generating querystring params.

In the case where the component is rolled out widely across a medium/large website, the HTML code may exist in multiple views across the codebase.

Changing the API key in this scenario becomes a bit of a chore.

Would it be possible to define the api_key parameter once per installation and then omit the api_key attribute when embedding the component?

As discussed today on our call, it would be amazing to have the ability for advanced users to have more control over how the CSS styles and markup are generated.

The scope of the feature would be:

• the element ships with the same defaults we currently have
• a user can optionally override the default templating function:
  • used to generate the HTML for each result row
• a user can optionally provide a custom CSS stylesheet which can be used to:
  • override default styles (which are otherwise impossible to do since they are rendered on the shadow DOM)
  • add styles for any custom HTML elements used in non-standard templating

As noted on the call, it may be beneficial to abstract the CSS variables used for padding etc away from the DOM structure and specific class naming which may change over time. This may either be done as part of this work or as a subsequent feature. For Example.