nhn / tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
http://ui.toast.com/tui-image-editor
MIT License
6.98k stars 1.29k forks source link

call `addText` method and revise immediately `space` not working #709

Open eomttt opened 2 years ago

eomttt commented 2 years ago

Describe the bug when i use addText method. textarea open and focusing but when i typing english or number and after typing space focus out textarea but korean is work very well (but when i typing korean and after click space twice, fire same)

example

abc(space)<- focus out
123(space)<- focus out
가나다(space)라마바사<- work well
가나다(space)(space)<-focus out

and it also fire at first time when i call addText and delete placeholder and same typing above doesn't file only fire when call addText and immediately write. so i think it's problem with addText method

To Reproduce Steps to reproduce the behavior:

  1. Go to 'call addText method'
  2. Typing any text and type space after
  3. textarea focused out -> but when i double click textarea after focus out and revise work very well

Expected behavior Not focusing out

Screenshots https://user-images.githubusercontent.com/22593217/153546996-12e96507-f4e0-4a1f-94b1-f2eb3dff7f29.mov

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

eomttt commented 2 years ago

i debug some case. when i click space textarea tag detached in body tag at first time

eomttt commented 2 years ago

i forked repo and make new html for test my issue https://github.com/eomttt/tui.image-editor/commit/456921f7c4900fb1190b25c4aaa7794f9bdfa811

open dev serve and check please

eomttt commented 2 years ago

https://user-images.githubusercontent.com/22593217/153568856-fe4eea90-261e-4d1b-bafa-8ed0337b9e74.mov

lja1018 commented 2 years ago

@eomttt Thank you for reporting the bug. The bug is not reproduced. Can you tell me how to reproduce it in detail?

eomttt commented 2 years ago

@eomttt Thank you for reporting the bug. The bug is not reproduced. Can you tell me how to reproduce it in detail?

You can see my commit (https://github.com/eomttt/tui.image-editor/commit/456921f7c4900fb1190b25c4aaa7794f9bdfa811) and show example04-add-text.html file and produce this html in your dev server.

한국말로 하자면.... addText 메소드 실행 후, 텍스트박스가 생기면 그때 한글을 제외한 영어나 숫자를 입력하다가 스페이스를 입력하면 텍스트 박스에서 포커스가 아웃됩니다. 한글 인경우 연속으로 스페이스를 치면 텍스트 박스에서 포커스가 아웃됩니다.

조금 코드를 찾아보니 autofocus 인 경우에 events.TEXT_EDITING 이벤트가 발생 안되어서 zoom.js 에서 _startHandModeWithSpaceBar 메소드에서 this.isTextEditing 이 아직 false 여서 스페이스시 this.startHandMode 메소드가불려서 포커스가 없어집니다.

r그래서 PR 도 열어 봤습니다. (https://github.com/nhn/tui.image-editor/pull/711)

lja1018 commented 2 years ago

@eomttt I succeeded in reproducing it. Thank you for the information. I will comment on the PR.