AutoSuggest icon indicating copy to clipboard operation
AutoSuggest copied to clipboard

Supporting input type=email

Open anandphulwani opened this issue 4 years ago • 6 comments

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?

anandphulwani avatar Dec 31 '20 20:12 anandphulwani

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

chandrasekhar-ambula avatar Jan 01 '21 05:01 chandrasekhar-ambula

@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?

anandphulwani avatar Jan 01 '21 08:01 anandphulwani

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

chandrasekhar-ambula avatar Jan 01 '21 10:01 chandrasekhar-ambula

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.

anandphulwani avatar Jan 01 '21 11:01 anandphulwani

@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

chandrasekhar-ambula avatar Jan 02 '21 09:01 chandrasekhar-ambula

@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.

anandphulwani avatar Jan 02 '21 20:01 anandphulwani