Skip to content

code-input element's input event fires when typing in plugin's dialog #222

Description

@WebCoder49

Steps to Reproduce

  1. 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>
  1. Open the browser console in DevTools
  2. Type in the code-input element
  3. Ctrl+F; type in the find and replace dialog
  4. 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:coreA bug/feature for the core code-input.js/code-input.css filesbreaking-changebugSomething isn't workingpriority:high

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions