Repository navigation
code-input element's input event fires when typing in plugin's dialog #222
Description
Steps to Reproduce
- Run this HTML:
<!DOCTYPE html>
<html>
<body>
<!--For convenience, this demo uses files from JSDelivr CDN; for more privacy and security download and host them yourself.-->
<!--Prism+code-input-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js" data-manual></script><!--Remove data-manual if also using Prism normally-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css"></link>
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.min.css">
<!--Plugins-->
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/plugins/find-and-replace.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/plugins/find-and-replace.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/plugins/go-to-line.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/plugins/go-to-line.min.css"/>
<script>
codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Prism(Prism, [new codeInput.plugins.FindAndReplace(), new codeInput.plugins.GoToLine()]));
</script>
<code-input oninput="console.log(event)"><textarea data-code-input-fallback></textarea></code-input>
</body>
</html>- Open the browser console in DevTools
- Type in the
code-inputelement - Ctrl+F; type in the find and replace dialog
- Close the find and replace dialog; Ctrl+G; type in the go to line dialog
Expected Output
Input events are only logged in step 3, when code is being entered in the code-textarea
Actual Output
Input events are logged in steps 3, 4, and 5, both when code is being entered in the code-textarea and when text is entered in the plugins' dialogs
Note
Breaking change: Fixing this may break people's setups where they use input events to detect input changes in the plugins' dialogs.
area:core because this will bug will occur for any dialog-containing plugin people create, unexpectedly.
Activity
[-]`code-input` element's `input` event fires when find-and-replace[/-][+]`code-input` element's `input` event fires when typing in plugin's dialog[/+]