Polymer blocking keyboard input?

Question

Polymer blocking keyboard input?

205 Views Asked by jdmdevdotnet At 14 May 2025 at 13:17

I inherited an Adobe CEP extension at work. Trying to wrap my head around an issue that makes it so absolutely no input from keyboard works on text inputs. To elaborate, absolutely no keyboard input works in Polymer's text inputs. The input get's focused, but if I type anything in them I get the mac error alert sound. The only key that I was able to make work was "tab". Anything else does not work. It's built using Polymer. At first I was unsure what's causing the issue, and since I inherited this project I was confused where to start. After about a day of debugging, I believe it's related to Polymer somehow. The reason for this is, if I remove the Polymer HTML element that renders it, and just put an input there, the input works. It only seems to block input inside the <template> ... </template>. I've looked all over the internet for any clues on what could be causing Polymer to block this input, there's no errors in console or anything, and I've come up short handed.

Does anyone have any insight on this?

Original Q&A

There are 2 best solutions below

**Omar BELKHODJA** · Answer 1

I'm facing the same problem. Actually, it is not related to polymer, but to the webcomponents polyfill. If you try the following source code inside an Adobe CEP extension, you will see that you can click inside both the elements, select any text, but you are not able to edit it.

<html>
<head>
    <script>
        // Force all polyfills on
        if (window.customElements) window.customElements.forcePolyfill = true;
        ShadyDOM = {
            force: true
        };
        ShadyCSS = {
            shimcssproperties: true
        };
    </script>
    <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
    <template id="x-foo-from-template">
        <input value="from template">
    </template>
    <script>
        let tmpl = document.querySelector('#x-foo-from-template');

        customElements.define('x-foo-from-template', class extends HTMLElement {
            constructor() {
                super();
                let shadowRoot = this.attachShadow({
                    mode: 'open'
                });
                shadowRoot.appendChild(tmpl.content.cloneNode(true));
            }
        });

        customElements.define('x-foo-from-dynamic', class extends HTMLElement {
            constructor() {
                super();
                let shadowRoot = this.attachShadow({
                    mode: 'open'
                });
                var inputEl = document.createElement('input');
                inputEl.value = "from created element";
                shadowRoot.appendChild(inputEl);
            }
        });
    </script>

    <x-foo-from-template></x-foo-from-template>
    <x-foo-from-dynamic></x-foo-from-dynamic>

</body>

</html>

**Markus Mårtensson** · Answer 2

Faced with the same issue, we finally found documented that Adobe will hand over all keypresses to the host application unless it can determine that an input or dropdown element has focus. I expect this is done using a simple check on document.activeElement. When the Shadow DOM is involved, Adobe would have to do something like

let target = document.activeElement;
while (target.shadowRoot && target.shadowRoot.activeElement) {
  target = target.shadowRoot.activeElement;
}

in order to find the underlying <input> element.

Since this is currently not working, we needed to use registerKeyEventsInterest to explicitly have all keypresses be processed by our code.

var csInterface = new CSInterface();
var keyEvents = [];
// All the keyCodes you need, with the modifiers used
keyEvents.push({ keyCode: 0 });
keyEvents.push({ keyCode: 0, metaKey: true });
// ...
csInterface.registerKeyEventsInterest(JSON.stringify(keyEvents));

We actually went ahead and looped 0..255 and registered for all modifiers. With the exception of keyboard based copy-paste, we now have full functionality with our webcomponents (mostly PolymerElement/LitElement based).

https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_8.x/Documentation/CEP%208.0%20HTML%20Extension%20Cookbook.md#register-an-interest-in-specific-key-events

Polymer blocking keyboard input?

There are 2 best solutions below

Related Questions in POLYMER

Related Questions in ADOBE-EXTENSION

Trending Questions

Popular # Hahtags

Popular Questions