feat: Added support for new input types and optimized the logic for showing and hiding elements.#56
feat: Added support for new input types and optimized the logic for showing and hiding elements.#56discreted66 wants to merge 1 commit into
Conversation
WalkthroughThe search box replaces the documented ChangesInput type support
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/search-box/src/renderless.ts`:
- Line 93: Update the computed property hasBackupList so option-less input
fields are not treated as requiring a backup list: gate the input case on
state.prevItem.options?.length or remove 'input' from the fallback types,
ensuring direct-entry inputs do not leave isLoading stuck on the loading state.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6156685c-f01f-4cb9-b83f-a31fc3e09bcc
📒 Files selected for processing (15)
packages/docs/.vitepress/config.mtspackages/docs/apis/types.mdpackages/docs/examples/input-type.mdpackages/docs/guide/usage.mdpackages/docs/search-box.jspackages/docs/search-box/input-type.spec.tspackages/docs/search-box/input-type.vuepackages/search-box/__tests__/dropdown.spec.tspackages/search-box/package.jsonpackages/search-box/src/components/first-level-panel.vuepackages/search-box/src/components/second-level-panel.vuepackages/search-box/src/composables/use-dropdown.tspackages/search-box/src/index.type.tspackages/search-box/src/renderless.tspackages/search-box/src/utils/dropdown.ts
💤 Files with no reviewable changes (1)
- packages/search-box/src/composables/use-dropdown.ts
There was a problem hiding this comment.
🧹 Nitpick comments (3)
packages/docs/search-box/input-type.spec.ts (3)
78-101: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider splitting test 5 into two isolated tests
This test combines two distinct regression scenarios: (1) dropdown closes after option selection from a panel, and (2) dropdown closes after direct text entry. Combining them means a failure in the first half prevents the second half from running, making it harder to diagnose which regression returned. Splitting into two tests improves isolation and failure clarity.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/docs/search-box/input-type.spec.ts` around lines 78 - 101, Split the combined regression test into two independent tests: one covering dropdown closure after selecting the “备注” option from the secondary panel, and another covering dropdown closure after entering text for the “描述” field and pressing Enter. Give each test its own setup/navigation and assertions so either scenario runs and reports failures independently.
12-12: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winFragile positional selectors with
.nth(2)The
page.locator('div').filter({ hasText: /^备注$/ }).nth(2).click()pattern is used across nearly every test. Positional selectors like.nth(2)are brittle — any DOM restructuring (adding a wrapper, reordering panels) will silently break these tests with unclear failure messages.Consider using more semantic selectors, such as scoping to the first-level panel container or using a
data-testidattribute on the selectable field items.Also applies to: 32-32, 47-47, 65-65, 87-87, 96-96, 112-112, 120-120
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/docs/search-box/input-type.spec.ts` at line 12, Replace the fragile positional selectors using page.locator('div').filter({ hasText: /^备注$/ }).nth(2) across the tests with stable semantic selectors, preferably by scoping to the appropriate panel container or adding and targeting a data-testid on selectable field items. Update all occurrences identified in the affected test cases while preserving their click behavior.
4-4: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win
pageerrorassertion timing may miss post-test errorsThe
page.on('pageerror', (exception) => expect(exception).toBeNull())pattern asserts inside the event callback. If a page error fires after the test body resolves but before Playwright tears down the page, the assertion may not be attributed to the correct test. A more robust pattern collects errors and asserts at the end:const errors: string[] = [] page.on('pageerror', (e) => errors.push(e.message)) // ... test body ... expect(errors).toEqual([])♻️ Suggested pattern (apply to each test)
test('input 输入型 - 有 options 时走 radio 面板选择', async ({ page }) => { - page.on('pageerror', (exception) => expect(exception).toBeNull()) + const errors: string[] = [] + page.on('pageerror', (e) => errors.push(e.message)) await page.goto('/examples/input-type') // ... test body ... + expect(errors).toEqual([]) })Also applies to: 25-25, 39-39, 57-57, 79-79, 104-104
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/docs/search-box/input-type.spec.ts` at line 4, Replace the inline pageerror assertions in each affected test with an errors array collected via the pageerror listener, then assert errors is empty at the end of the test body. Apply this pattern consistently to all tests in input-type.spec.ts, ensuring the final assertion occurs before the test completes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/docs/search-box/input-type.spec.ts`:
- Around line 78-101: Split the combined regression test into two independent
tests: one covering dropdown closure after selecting the “备注” option from the
secondary panel, and another covering dropdown closure after entering text for
the “描述” field and pressing Enter. Give each test its own setup/navigation and
assertions so either scenario runs and reports failures independently.
- Line 12: Replace the fragile positional selectors using
page.locator('div').filter({ hasText: /^备注$/ }).nth(2) across the tests with
stable semantic selectors, preferably by scoping to the appropriate panel
container or adding and targeting a data-testid on selectable field items.
Update all occurrences identified in the affected test cases while preserving
their click behavior.
- Line 4: Replace the inline pageerror assertions in each affected test with an
errors array collected via the pageerror listener, then assert errors is empty
at the end of the test body. Apply this pattern consistently to all tests in
input-type.spec.ts, ensuring the final assertion occurs before the test
completes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cc9fbbb5-3979-4348-a642-0de98a313aea
📒 Files selected for processing (15)
packages/docs/.vitepress/config.mtspackages/docs/apis/types.mdpackages/docs/examples/input-type.mdpackages/docs/guide/usage.mdpackages/docs/search-box.jspackages/docs/search-box/input-type.spec.tspackages/docs/search-box/input-type.vuepackages/search-box/__tests__/dropdown.spec.tspackages/search-box/package.jsonpackages/search-box/src/components/first-level-panel.vuepackages/search-box/src/components/second-level-panel.vuepackages/search-box/src/composables/use-dropdown.tspackages/search-box/src/index.type.tspackages/search-box/src/renderless.tspackages/search-box/src/utils/dropdown.ts
💤 Files with no reviewable changes (1)
- packages/search-box/src/composables/use-dropdown.ts
✅ Files skipped from review due to trivial changes (2)
- packages/docs/.vitepress/config.mts
- packages/docs/guide/usage.md
🚧 Files skipped from review as they are similar to previous changes (11)
- packages/search-box/src/components/second-level-panel.vue
- packages/docs/examples/input-type.md
- packages/docs/apis/types.md
- packages/search-box/tests/dropdown.spec.ts
- packages/search-box/src/components/first-level-panel.vue
- packages/search-box/package.json
- packages/docs/search-box.js
- packages/search-box/src/index.type.ts
- packages/search-box/src/utils/dropdown.ts
- packages/search-box/src/renderless.ts
- packages/docs/search-box/input-type.vue
1 participant
feat:新增input类型支持，优化显隐逻辑
Summary by CodeRabbit
inputsearch field type (defaults to notype), including direct text entry and option-driven selection with radio-style panel behavior.input/panel behavior (including search-option visibility and backup list handling) and removed special handling for the deprecatednoValuetype.inputexample page and updated type references; replacednoValuewithinput.