Skip to content

code-input element's input event fires when find-and-replace #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.

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

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions