diff --git a/.changeset/light-actors-wonder.md b/.changeset/light-actors-wonder.md new file mode 100644 index 0000000000..3731cb02ca --- /dev/null +++ b/.changeset/light-actors-wonder.md @@ -0,0 +1,7 @@ +--- +"@lynx-js/web-core-server": patch +"@lynx-js/web-core": patch +"@lynx-js/web-explorer": patch +--- + +feat: builtinTagTransformMap add `'x-input-ng': 'x-input'` diff --git a/packages/web-platform/web-core-server/src/createLynxView.ts b/packages/web-platform/web-core-server/src/createLynxView.ts index 5484f3d1d2..f027e48d73 100644 --- a/packages/web-platform/web-core-server/src/createLynxView.ts +++ b/packages/web-platform/web-core-server/src/createLynxView.ts @@ -82,6 +82,7 @@ const builtinTagTransformMap = { 'list': 'x-list', 'svg': 'x-svg', 'input': 'x-input', + 'x-input-ng': 'x-input', }; // @ts-expect-error diff --git a/packages/web-platform/web-core/src/apis/LynxView.ts b/packages/web-platform/web-core/src/apis/LynxView.ts index b6e7e07a67..e7fa3ad839 100644 --- a/packages/web-platform/web-core/src/apis/LynxView.ts +++ b/packages/web-platform/web-core/src/apis/LynxView.ts @@ -421,6 +421,7 @@ export class LynxView extends HTMLElement { 'list': 'x-list', 'svg': 'x-svg', 'input': 'x-input', + 'x-input-ng': 'x-input', ...this.overrideLynxTagToHTMLTagMap, }; if (!this.shadowRoot) { diff --git a/packages/web-platform/web-tests/tests/react.spec.ts b/packages/web-platform/web-tests/tests/react.spec.ts index 47ea210e9b..c3548e79f0 100644 --- a/packages/web-platform/web-tests/tests/react.spec.ts +++ b/packages/web-platform/web-tests/tests/react.spec.ts @@ -3024,6 +3024,19 @@ test.describe('reactlynx3 tests', () => { const result = await page.locator('.result').first().innerText(); expect(result).toBe('foobar-6-6'); }); + // input/bindinput test-case start for + test( + 'basic-element-x-input-ng-bindinput', + async ({ page }, { title }) => { + await goto(page, title); + await page.locator('input').press('Enter'); + await wait(200); + await page.locator('input').fill('foobar'); + await wait(200); + const result = await page.locator('.result').first().innerText(); + expect(result).toBe('foobar-6-6'); + }, + ); // input/bindinput test-case end test( 'basic-element-x-input-getValue', diff --git a/packages/web-platform/web-tests/tests/react/basic-element-x-input-ng-bindinput/index.jsx b/packages/web-platform/web-tests/tests/react/basic-element-x-input-ng-bindinput/index.jsx new file mode 100644 index 0000000000..8dc150feb8 --- /dev/null +++ b/packages/web-platform/web-tests/tests/react/basic-element-x-input-ng-bindinput/index.jsx @@ -0,0 +1,42 @@ +// Copyright 2023 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. +import { root, useState } from '@lynx-js/react'; + +function App() { + const value = 'bindinput'; + const [result, setResult] = useState(); + + const onInput = ({ detail }) => { + if (typeof detail !== 'object') { + throw new Error( + `detail type not match. expect object, got ${typeof detail}`, + ); + } + + const { value, cursor, textLength, selectionStart, selectionEnd } = detail; + + if (value.length !== textLength) { + throw new Error( + `input length not match. expect ${textLength}, got ${value.length}`, + ); + } + + setResult(`${value}-${selectionStart}-${selectionStart}`); + }; + + return ( + + + + {result} + + + ); +} + +root.render();