Skip to content

Add autocomplete attribute support for x-input component #1444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 8, 2025
Merged

Add autocomplete attribute support for x-input component #1444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a27605a
Implement autocomplete attribute support for x-input component
Copilot Aug 6, 2025
8d092bc
feat: add changeset for autocomplete attribute support
Copilot Aug 6, 2025
255f451
Regenerate autocomplete HTML test file using placeholder.html structu…
Copilot Aug 7, 2025
6de10ed
fix
PupilTong Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/neat-frogs-autocomplete.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@lynx-js/web-elements": patch
---

feat: add autocomplete attribute support for x-input component

Implements autocomplete attribute forwarding from the x-input custom element to the internal HTML input element in the shadow DOM. This enables standard browser autocomplete functionality for x-input elements.
8 changes: 7 additions & 1 deletion packages/web-platform/web-elements/src/XInput/XInputAttribute.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
export class XInputAttribute
implements InstanceType<AttributeReactiveClass<typeof HTMLElement>>
{
static observedAttributes = ['value', 'disabled'];
static observedAttributes = ['value', 'disabled', 'autocomplete'];
#dom: HTMLElement;

#getInputElement = genDomGetter<HTMLInputElement>(
Expand Down Expand Up @@ -46,6 +46,12 @@ export class XInputAttribute
(value) => (value !== null ? '' : null),
);

@registerAttributeHandler('autocomplete', true)
#handleAutocomplete = bindToAttribute(
this.#getInputElement,
'autocomplete',
);

constructor(dom: HTMLElement) {
this.#dom = dom;
}
Expand Down
22 changes: 22 additions & 0 deletions packages/web-platform/web-tests/tests/web-elements.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -836,7 +836,7 @@
}, { title }) => {
await gotoWebComponentPage(page, title);
await wait(500);
expect(page.locator('x-foldview-slot-ng')).toHaveCSS('top', '200px');

Check failure on line 839 in packages/web-platform/web-tests/tests/web-elements.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright (Default) / check

[firefox] › tests/web-elements.spec.ts:833:5 › web-elements test suite › x-foldview-ng › x-foldview-ng/basic-toolbar-in-lynx-wrapper 

  9) [firefox] › tests/web-elements.spec.ts:833:5 › web-elements test suite › x-foldview-ng › x-foldview-ng/basic-toolbar-in-lynx-wrapper 
    Error: expect(locator).toHaveCSS(expected)

    Locator: locator('x-foldview-slot-ng')
    Expected string: "200px"
    Received string: ""
    Call log:
      - Expect "toHaveCSS" with timeout 5000ms
      - waiting for locator('x-foldview-slot-ng')


      837 |       await gotoWebComponentPage(page, title);
      838 |       await wait(500);
    > 839 |       expect(page.locator('x-foldview-slot-ng')).toHaveCSS('top', '200px');
          |                                                  ^
      840 |     });
      841 |     test('x-foldview-ng/size-parent-grow-children-specific', async ({
      842 |       page,
        at /__w/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/web-elements.spec.ts:839:50

Check failure on line 839 in packages/web-platform/web-tests/tests/web-elements.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright (Default) / check

[webkit] › tests/web-elements.spec.ts:833:5 › web-elements test suite › x-foldview-ng › x-foldview-ng/basic-toolbar-in-lynx-wrapper 

  7) [webkit] › tests/web-elements.spec.ts:833:5 › web-elements test suite › x-foldview-ng › x-foldview-ng/basic-toolbar-in-lynx-wrapper 
    Error: expect(locator).toHaveCSS(expected)

    Locator: locator('x-foldview-slot-ng')
    Expected string: "200px"
    Received string: ""
    Call log:
      - Expect "toHaveCSS" with timeout 5000ms
      - waiting for locator('x-foldview-slot-ng')


      837 |       await gotoWebComponentPage(page, title);
      838 |       await wait(500);
    > 839 |       expect(page.locator('x-foldview-slot-ng')).toHaveCSS('top', '200px');
          |                                                  ^
      840 |     });
      841 |     test('x-foldview-ng/size-parent-grow-children-specific', async ({
      842 |       page,
        at /__w/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/web-elements.spec.ts:839:50
});
test('x-foldview-ng/size-parent-grow-children-specific', async ({
page,
Expand Down Expand Up @@ -2481,6 +2481,28 @@
},
);

test(
'attribute-autocomplete',
async ({ page }, { titlePath, title: simpleTitle }) => {
const title = getTitle(titlePath);
await gotoWebComponentPage(page, title);

// Test that autocomplete attribute is passed to the input element in shadow tree
const autocompleteValue = await page.locator('#target').evaluate(
(dom) => {
const shadowRoot = dom.shadowRoot;
if (!shadowRoot) return null;
const input = shadowRoot.querySelector(
'#input',
) as HTMLInputElement;
return input ? input.getAttribute('autocomplete') : null;
},
);

expect(autocompleteValue).toBe('username');
},
);

test(
'type-value-do-not-show-input',
async ({ page }, { titlePath, title: simpleTitle }) => {
Expand Down Expand Up @@ -3290,7 +3312,7 @@
.jsonValue();
const noSmoothScrollTime = timeStampsWithoutSmooth[1]
- timeStampsWithoutSmooth[0];
expect(noSmoothScrollTime).toBeLessThan(smoothScrollTime);

Check failure on line 3315 in packages/web-platform/web-tests/tests/web-elements.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright (Default) / check

[chromium] › tests/web-elements.spec.ts:3260:5 › web-elements test suite › x-swiper › x-swiper/x-swiper-set-curren-smooth-scroll 

  8) [chromium] › tests/web-elements.spec.ts:3260:5 › web-elements test suite › x-swiper › x-swiper/x-swiper-set-curren-smooth-scroll 
    Error: expect(received).toBeLessThan(expected)

    Expected: < 207
    Received:   207

      3313 |         const noSmoothScrollTime = timeStampsWithoutSmooth[1]
      3314 |           - timeStampsWithoutSmooth[0];
    > 3315 |         expect(noSmoothScrollTime).toBeLessThan(smoothScrollTime);
           |                                    ^
      3316 |       },
      3317 |     );
      3318 |
        at /__w/lynx-stack/lynx-stack/packages/web-platform/web-tests/tests/web-elements.spec.ts:3315:36
},
);

Expand Down
43 changes: 43 additions & 0 deletions packages/web-platform/web-tests/tests/web-elements/x-input/attribute-autocomplete.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<!-- Copyright 2024 The Lynx Authors. All rights reserved.
Licensed under the Apache License Version 2.0 that can be found in the
LICENSE file in the root directory of this source tree. -->
<html>
<head>
<meta charset="utf-8">
<title>web playground</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="default" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="portrait" name="screen-orientation">
<meta
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
name="viewport"
>
<meta content="portrait" name="x5-orientation" />

<link
href="/node_modules/@lynx-js/web-elements/index.css"
rel="stylesheet"
/>
<link
href="/web-elements.css"
rel="stylesheet"
/>

<style>
@import url("../../common.css");
</style>
</head>

<body>
<script src="/web-elements.js" defer></script>
<x-view class="page">
<x-input
id="target"
autocomplete="username"
style="height: 50px; width: 200px"
></x-input>
</x-view>
</body>
</html>
Loading