yuku / textcomplete

Autocomplete for HTMLTextAreaElement and more.
https://yuku.takahashi.coffee/textcomplete/
MIT License
1.74k stars 303 forks source link

Escape does not close the autocomplete #322

Open laurentsenta opened 4 years ago

laurentsenta commented 4 years ago

I get this behavior in my code and on the demo page: https://yuku.takahashi.coffee/textcomplete/

laurentsenta commented 4 years ago

I'd be happy to contribute if you need a hand,

Could you give me some context? It looks like the code is designed to handle escape, so this looks like a bug rather than a new feature.

https://github.com/yuku/textcomplete/blob/main/packages/textcomplete-core/src/Textcomplete.ts#L96-L101

yuku commented 4 years ago

Thanks for opening the issue. When a user press "escape",

  1. TextareaEditor.prototype.onKeydown event handler is executed.
  2. The editor emits "esc" event by calling emitEscEvent at L98
  3. Textcomplete.prototype.handleEsc is executed. And call customEvent.preventDefault() if the dropdown is shown.
  4. Finally, the mouseEvent.preventDefault() is called at L100-L102.
hamza-mostafa commented 4 years ago

@laurentsenta @yuku Hello guys, I cannot reproduce this, nor find a PR, has this been fixed in another PR? @laurentsenta would you please share the browser and version you are using?

renaldas-kerpe-arria commented 3 years ago

Here's how you can fix this locally:

class CodeMirrorEditor2 extends CodeMirrorEditor {
  constructor(cm: CodeMirror.Editor) {
    super(cm);

    (this as any).stopListening();
    (this as any).onKeyup = (_cm: CodeMirror.Editor, e: KeyboardEvent) => {
      const code = this.getCode(e);
      if (code !== 'DOWN' && code !== 'UP' && code !== 'ESC') {
        this.emitChangeEvent();
      }
    };
    (this as any).startListening();
  }
}

FYI this issue only happens with CodeMirror editor, which assumes that all the keys, except 'DOWN' and 'UP' should trigger a change event, which in turn re-opens the dropdown. I have added a third exclusion for the 'ESC' key in the above code.