avcs06 / AutoSuggest

A JavaScript plugin to implement IDE like autocompletion in input, textarea or contenteditable fields.
https://avcs.pro/autosuggest
MIT License
39 stars 10 forks source link

Supporting input type=email #21

Open anandphulwani opened 3 years ago

anandphulwani commented 3 years ago

Just checked and it isn't working with input type email, i have modified the line 995 in Autosuggest.js to this

if (input.tagName === 'TEXTAREA' || (input.tagName === 'INPUT' && input.type === 'text') || (input.tagName === 'INPUT' && input.type === 'email')) {

still no avail, any ideas?

chandrasekhar-ambula commented 3 years ago

@anandphulwani can you explain what do you mean by no avail? Please post the expected behavior and actual behavior.

anandphulwani commented 3 years ago

@anandphulwani can you explain what do you mean by no avail? Please post the expected behavior and actual behavior.

Enviroment Details: Windows 10 Firefox, Firefox Developer Edition

I am swapping the input types of "email" with "text", it works on "text" but not on "email" Expected Behaviour: Dropdown of suggestions should load. Actual Behaviour: Dropdown does not load.

I have further debugged and found out that the function var getCursorPosition = function getCursorPosition(input) contains input.selectionStart, input.selectionEnd which is not permitted on input type "email", as mentioned in the first comment on the stackoverflow link, and i quote

Selection is only permitted with text/search, URL, tel and password.

Any further suggestions?

chandrasekhar-ambula commented 3 years ago

I have gone through the issue you have mentioned, looks like as of now there is no easy way to get current selection in email type fields, I will have to dig deeper to find a solution which might take some time.

For now you can use type="text" with a pattern or custom validation function to get it working

anandphulwani commented 3 years ago

I have gone through the issue you have mentioned, looks like as of now there is no easy way to get current selection in email type fields, I will have to dig deeper to find a solution which might take some time.

For now you can use type="text" with a pattern or custom validation function to get it working

Do you mind if i dig more into this, i want to understand why do you need selection, if you just need cursorposition, there are a lot of jquery plugins alternative we can use like this one, i can work out the code for cursorposition, but i need to do know the requirement for the selection functionality.

Edit: My bad, corrected to cursorposition instead of caretposition.

chandrasekhar-ambula commented 3 years ago

@anandphulwani the selection is not just for caret position, I am using selectionStart & selectionEnd to support autosuggest over selecting multiple characters too, when there is a selection the logic will ignore everything inside the selection and considers the text before the selection as trigger and upon choosing a value selection will be replaced

anandphulwani commented 3 years ago

@chandrasekhar-ambula Tried a lot of libraries for caret position, but no avail, the thing which was most close to the solution, was this , see if it helps.

Another cheeky workaround, could be change it to type="text" on focus and change it back to type="email" on blur.