obsidian-plugin-docs icon indicating copy to clipboard operation
obsidian-plugin-docs copied to clipboard

How to intercept keypress events in the text input field in the example modal?

Open hakonhagland opened this issue 2 years ago • 1 comments

Hi, I would like to intercept when enter is pressed in the text input field in the example modal:

https://marcus.se.net/obsidian-plugin-docs/user-interface/modals#accept-user-input

then I can allow the modal to be closed also when enter is pressed, and the user do not have to press the "Submit" button.

How can this be done? Should it be added to the plugin documentation?

hakonhagland avatar Mar 30 '23 14:03 hakonhagland

By trial and error and printing out various values in the chrome devtools console, I think I found a solution. In this case the Setting object just has a single component which can be accessed through array index 0:

       const textfield = new Setting(contentEl)
          .setName("Name")
          .addText((text) =>
            text.onChange((value) => {
                this.result = value;
            })
          );
        const input = textfield.components[0].inputEl;
        input.addEventListener("keypress", (ev: KeyboardEvent): void => {
            if (ev.key === "Enter") {
                this.close();
                this.onSubmit(this.result);
            }
        });

This seems to work now.

hakonhagland avatar Mar 30 '23 19:03 hakonhagland