Skip to content

feat(components): [input] support inputmode for textarea#23813

Merged
btea merged 2 commits into
element-plus:devfrom
snowbitx:fix/input-inputmode
Mar 16, 2026
Merged

feat(components): [input] support inputmode for textarea#23813
btea merged 2 commits into
element-plus:devfrom
snowbitx:fix/input-inputmode

Conversation

@snowbitx
Copy link
Copy Markdown
Contributor

@snowbitx snowbitx commented Mar 15, 2026 •
edited by coderabbitai Bot
Loading

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

This PR adds inputmode support for ElInput when type="textarea" , aligning its behavior with the default input implementation.

Summary by CodeRabbit

  • New Features
    • Added support for the inputmode attribute on input and textarea elements, enabling better mobile keyboard selection for different input types (e.g., numeric, decimal).

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 15, 2026 •
edited
Loading

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 15, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 204be001-8d40-42e1-ada1-8594598f82c8

📥 Commits

Reviewing files that changed from the base of the PR and between 83b1cfc and d33f645.

📒 Files selected for processing (2)
  • packages/components/input/__tests__/input.test.tsx
  • packages/components/input/src/input.vue
📝 Walkthrough

Walkthrough

Adds inputmode attribute support to the Input component. A Vue component binding enables the inputmode prop to be rendered on both input and textarea elements, with a corresponding test case validating the attribute application.

Changes

Cohort / File(s) Summary
Input Component Enhancement
packages/components/input/src/input.vue		 Binds the inputmode prop to both input and textarea elements via :inputmode attribute binding.
Test Coverage
packages/components/input/__tests__/input.test.tsx		 Adds test case verifying inputmode attribute is correctly applied to input (numeric mode) and textarea (decimal mode) elements.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested reviewers

  • rzzf
  • btea
  • Dsaquel

Poem

🐰 A whisker-twitch of joy, I say,
Input modes now have their way,
Numeric, decimal, pure delight,
DOM attributes shining bright,
One binding change, tests all aglow! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely describes the main change: adding inputmode support for textarea in the input component.
Description check ✅ Passed The description confirms all required template checkboxes are completed and provides a clear explanation of the feature being added.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📝 Coding Plan
  • Generate coding plan for human review comments

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Mar 15, 2026 •
edited
Loading

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus@23813

npm i https://pkg.pr.new/element-plus@23813

yarn add https://pkg.pr.new/[email protected]

commit: d33f645

@snowbitx snowbitx marked this pull request as ready for review March 15, 2026 16:11
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 15, 2026

🧪 Playground Preview: https://element-plus.run/?pr=23813
Please comment the example via this playground if needed.

btea
btea approved these changes Mar 16, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@btea btea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While I think adding these configurations to a textarea would be quite rare, it would be better to have better support for it.

@btea btea merged commit 988a618 into element-plus:dev Mar 16, 2026
17 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 16, 2026

@snowbitx Thanks for your contribution! ❤️

@element-bot element-bot mentioned this pull request Mar 20, 2026
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@btea btea btea approved these changes

@rzzf rzzf rzzf approved these changes

Assignees

@snowbitx snowbitx

Labels

Contribution::Community Needs Review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@snowbitx @btea @rzzf