search

yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.54k stars 436 forks source link

Enter text in blank input not allowed in Internet Explorer (Mix-mode) #440

Open singh-vikramjit opened 4 years ago

singh-vikramjit commented 4 years ago

Prerequisites

Demo Page

https://jsbin.com/nagocireha/edit?html,css,js,output

Explanation

Yesterday I test my code in Internet Explorer 11 and found a few things which are not working as expected.

  1. When I click inside the blank input to add a text and tag it does not enable the cursor to write something. ( face problem in Internet Explorer 11, Edge (Microsoft Edge 44.17763.831.0) )

  2. And when I click inside the input which has predefined value then it works fine but sometimes when I click it takes the cursor to the starting point of the input text instead of at the end of the text. (for this it would be great if check the attached file) sample-vue.zip

  3. And some time tag in mix mode does not work properly like I am using # to make a new tag and when I press # and the start type something then nothing happens and when I press backspace once then it indicates the tags dropdown (you can check in code snippet and in the below screenshot for better insight) ezgif com-video-to-gif (2)

  4. when I perform focus event the cursor goes to the starting point instead of the end of the text. when you click on the buttons (tag and ux-team) then you can check cursor position. ( face problem in Internet Explorer 11, Edge (Microsoft Edge 44.17763.831.0) )

Please check these issues and share your thoughts ASAP.

singh-vikramjit commented 4 years ago

Hi @yairEO have you checked these issues?

yairEO commented 4 years ago

Yes, I am trying to understand why and how to fix this.

singh-vikramjit commented 4 years ago

Hi @yairEO Thanks for these fixes but I tried with new CSS and js file and 3rd issue is still there.

  1. And some time tag in mix mode does not work properly like I am using # to make a new tag and when I press # and the start type something then nothing happens and when I press backspace once then it indicates the tags dropdown (you can check in the code snippet and in the below screenshot for better insight)

can you please check this issue once again. because now it is more frequent now every time when I press # and start typing nothing will happen every time when I press backspace then it works.

singh-vikramjit commented 4 years ago

I found one more issue with the latest version in Firefox

when I click on input which has text and ending with a Tag not able to focus and type something

https://jsbin.com/nagocireha/edit?html,css,js,output

if you click in the middle of the input where the normal text is written then cursor display and when click at the end to type something cursor is not displayed and not able to write something

yairEO commented 4 years ago

Yes I accidently closed this issue, it will be fixed shortly, trust me :)

singh-vikramjit commented 4 years ago

regarding the above Firefox issue I found an interesting thing like when i click at the end cursor is not displayed and i am not able to write something but if i press backspace the tag is removed and the cursor is visible and then create a new tag then focus out and again focus in input and then it works

the issue is only with the predefined default value

ezgif com-video-to-gif (4)

yairEO commented 4 years ago

Thanks for your excellent reports I keep finding more bugs. I am on it. As these days with the Corona virus around, I somehow have less time to work, but still do, don't worry

singh-vikramjit commented 4 years ago

Hi, @yairEO thanks for the new version. but I test with the latest version cart at the end fix in firefox but still remain in Edge in a different way. like when you focus on the element which is ending with a tag then carat is displayed at the starting point of the tag and you can not move it to end of the tag with arrow keys as well so if you want to write something more then you need to press the delete button to remove that tag then you are able to write something

yairEO commented 4 years ago

Thanks for letting me know, I forgot to test in Edge, I will work on a fix today

singh-vikramjit commented 4 years ago

and one small issue in IE-11 like when I try to select a tag from the whitelist dropdown I am not able to select the tag because when I press down arrow not able to select tag you can check in this jsbin

https://jsbin.com/zarahoxemo/1/edit?html,js,output

yairEO commented 4 years ago

MS Edge bug is very weird and I cannot find any Microsoft online bug tracker to see if there's a reference to it. I've tried Google without luck.

I've made a minimal demo to showcase the bug (on input focus, caret is misplaced)

For now I don't know how to deal with it