graphhopper/graphhopper-maps

Incomplete text after selecting same item from list.

Opened this issue · 5 comments

When I initially have this URL and type 'hoyersw' in the first input field and click on the first result of the autocomplete, which would be the same text as in the URL (Hoyerswerda - Wojerecy), then the input stays at 'hoyers' instead of 'Hoyerswerda - Wojerecy'

I have been able to reproduce.

The pattern is always the same :

  1. Select a new input search
  2. The autocomplete works
  3. Empty the cell
  4. Type something that gives the same autocomplete result (props.point.queryText)
  5. Select the same result
  6. Input fields doesn't switch to autocomplete suggestion
  7. Using console.log, we see that useEffect => setText is not triggered to update the text from "input" to "queryText"
if (action instanceof InvalidatePoint) {
  const points = QueryStore.replacePoint(state.queryPoints, {
    ...action.point,
    isInitialized: false,
    queryText: ''
  });
  return {
    ...state,
    queryPoints: points,
  };
} else if (action instanceof ClearPoints) {

Query text must be emptied for the change to be registered by useEffect().

useEffect(() => {
  setText(props.point.queryText);
  console.log('useEffect: '+props.point.queryText);
}, [props.point.queryText]);

Is that correct ? I'm still learning Typescript and web development.

Oh, nice. Indeed the first code you mentioned already fixes the problem and is what we need here, I guess! Feel free to create a pull request or I can mention you in the commit to credit you properly :)

Unfortunately I had to revert it as it breaks editing the input text: 1. search for something and click the suggestion. 2. click again on the input element and whatever you type the input will be (incorrectly) cleared before it.

Understood. Makes total sense. Next time, I'll mark it as untested explicitely (more like an hint to follow).