[Bug]: Selecting a browser autofill suggestion in a Dock Manager content pane throws an error

[jsakamotoIGJP]

Which component(s) are affected?

Other/unknown (please specify in the description)

I could not find "Dock Manager" in the option list. This bug happens in the Dock Manager component, which ships as a separate package (@infragistics/igniteui-dockmanager), used together with igniteui-webcomponents.

Description

I placed a plain <input> element inside a content pane of igc-dockmanager, and enabled autocomplete on it.

When the browser autofill feature suggests a value for that input, and I select one of the suggestions, I expected the browser to just fill the input value, with no error.

Instead, the browser console shows this error right after I select the autofill suggestion.

Uncaught TypeError: event.getModifierState is not a function

The error is thrown from the Dock Manager component's own compiled script (a file named like defineComponents-*.js). It looks like the native browser event fired by the autofill feature does not have a getModifierState method, and the Dock Manager code calls that method without checking whether it exists.

I will attach a screen recording (GIF) that shows this error in the browser console.

Reproduction

Steps to reproduce.

1. Set up a project with igniteui-webcomponents and @infragistics/igniteui-dockmanager.
2. Add an igc-dockmanager element with one content pane.
3. Inside that content pane, add a plain input element, for example <input type="text" name="fullname" autocomplete="name" />.
4. Open the page in a Chromium based browser, and enter a name in that input once, so the browser remembers it as an autofill suggestion.
5. Reload the page, click the input again, and this time click the autofill suggestion from the browser dropdown, instead of typing.

The console then shows the error above.

I will attach a minimal reproduction project as a zip file.

• 📦c-00247372-wcapp1.zip

Workaround

I have worked around this problem by running the following code once, at startup, before any autofill event can happen.

This code listens for keydown and keyup events on the whole document, in the capture phase. If the event target is inside an igc-dockmanager element, and the event does not have a real getModifierState method or a real key property, the code adds a fake one. This stops the Dock Manager component from throwing an error when it receives a synthetic event from the browser autofill feature.

(() => {
    const patchSyntheticKeyboardEvent = (e) => {
        if (!(e.target instanceof Element) || !e.target.closest("igc-dockmanager")) {
            return;
        }
        if (typeof e.getModifierState !== "function") {
            e.getModifierState = () => false;
        }
        if (typeof e.key !== "string") {
            e.key = "";
        }
    }

    document.addEventListener("keydown", patchSyntheticKeyboardEvent, true);
    document.addEventListener("keyup", patchSyntheticKeyboardEvent, true);
})();

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

igniteui-webcomponents 7.3.1, @infragistics/igniteui-dockmanager 2.1.3, @infragistics/igniteui-webcomponents-core 7.1.0

Browser/OS/Node environment

Browser: Chrome 152.0.7977.76
OS: Windows 11 Pro 10.0.26200
Node version: v26.1.0
npm version: 11.13.0