Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug with inputs #920

Open
tokensniper opened this issue Oct 18, 2019 · 4 comments
Open

Bug with inputs #920

tokensniper opened this issue Oct 18, 2019 · 4 comments

Comments

@tokensniper
Copy link

Hi there! I created my own block tool for Editor. In my tool you have to input some text, then click "save" button, then it will render. So everything is ok, besides input. When I press Enter on the keyboard when input is focused - it creates a new block with this input. Maybe it's my bad, maybe its a bug in Editor. I have the same issues with every input in my custom block tools. Here is the video https://recordit.co/bvGKcGuRav

@hata6502
Copy link
Contributor

hata6502 commented Dec 7, 2019

I encounted same problem too!
But this bug doesn't appear with editor-js/image's caption input.
https://github.com/editor-js/image

editor-js/image uses div for caption input.
Modified div to input, this bug appeared.

Screenshot from 2019-12-07 11-56-05

So, I think this bug can be avoided to use <div contenteditable="true"> !

@Dacesilian
Copy link

I confirm this bug, there is my video of it in my plugin - https://youtu.be/A1-C6L4-tkw .
Is it planned to fix this, please? I've tried to bind keydown/keyup/keypress listeners but preventDefault is not working.

@dmtstr
Copy link

dmtstr commented Jul 9, 2020

Try event.stopPropagation()

input.addEventListener('keydown', event => {
    if (event.keyCode === 13) event.stopPropagation();
})

Create a block after pressing enter:

input.addEventListener('keydown', event => {
    if (event.keyCode !== 13) return;
    event.stopPropagation();
    this.api.blocks.insert('paragraph');
    this.api.caret.setToBlock(this.api.blocks.getCurrentBlockIndex());
    this.api.toolbar.open();
})

@sethmichaelbrown
Copy link

I am still seeing this bug in v2.22.2. I am creating a multiline MUI input via a custom plugin. The plugin renders a target div then I use ReactDOM.render to append a React component to the target.

Any time I hit enter within the MUI multiline text area, I get a new block. I have tried listening for keydown and using e.stopPropagation() as well as e.preventDefault() and return. None of these seem to work.

Any thoughts on how I might keep focus within the textarea to create a new line? Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants