Autocomplete - prevent text highlight

Wappler General Need Help
1

Hello,

Maybe anyone of you have a method or a code to prevent text highlight when user picks a word from autocomplete component? I’ve tried probably everything and still cannot get this to work the issue is - when user selects a text from autocomplete it’s auto highlighted and I don’t want this I need it a user to select a text and be able to type after the text. If it’s impossible to make this to work with autocomplete maybe anyone of you has some other suggestions what to replace autocomplete component to? my autocomplete is in a repeat:

                  <input id="autocomplete_specialty" name="autocomplete_specialty" is="dmx-autocomplete" dmx-bind:data="conn_values.data.query_specialty" optiontext="specialty" optionvalue="specialty_id" noresultslabel="" dmx-on:change="ds_educations.update({$id: $value.$id},{specialty_id: value})" matchstart="true" noclear="true">

image

2

Poking around in dmxAutocomplete.css it looks like that comes from the section

.dmx-autocomplete-active {
    background: #007bff;
    background: Highlight;
    color: #fff;
    color: HighlightText;
}

Not tried but maybe you need to override the "background" attributes with a new definition (!important tag may be needed)

3

probably it’s not coming from CSS, it’s caused by the .select() call in the JavaScript of the Autocomplete component. CSS can change colors of the dropdown items, but it can’t stop the input text from being selected don’t you think?

4

Perhaps, didnt try to examine the minified .js
I was just a guess

5

Just so i understand your request - when an item in the autocomplete is selected, you want to have the input still focused, text not selected and cursor placed after the text in the autocomplete input?

7

yes, exactly !

8

I’ve also find out that other user was dealing with this and end up with no solution, is this is impossible to achieve? Auto complete field highlights selected item, how to prevent? - Wappler General / Need Help - Wappler Community

if yes, maybe any custom javascript for this or any way to use any other component for this etc. text ?

9

This will be improved in the next update.

10

also can you fix the issue where no results dropdown still opens despite the fact that it’s set to empty? noresultslabel=""

image
image324×118 6.04 KB

12

this component also has another issue: when typing a text that’s not in autocomplete - its ok, when typing text - that’s inside autocomplete and select it - it pass only text_id (impossible to pass raw text to the DB) and the real issue is that if you type a text that’s suggested and inside a DB and not selecting it just leaving same text - then it sends old uncorrected text to the DB etc. my case I have “Vadyba” in autocomplete, then I select it and correct it to the “Vadybass”, then correct it manually to “Vadyba” then suggestion happens but I do not click on it and save the work, then it’s saved to “Vadybass” instead of “Vadyba” as a text.

13

The component acts like a searchable select, the value is being send to the server and a label is shown to the user.

There is an option No Clear that will set the value to the one typed in the input when there is no match.

When you do not click a suggestion, but the typed text does exactly match a result it should indeed be saved, this didn't happen and is a bug. I hope to have this fixed in the update.

15

Fixed in Wappler 7.2.2