Skip to content
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.

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

feat(searchbar): autocapitalize, dir, lang, maxlength, and minlength are inherited to native input #29098

Merged
merged 6 commits into from
Mar 1, 2024

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Feb 28, 2024

Issue number: resolves #27606


What is the current behavior?

Certain attributes are not be inherited to the inner searchbar. Developers need control over these attributes to provide important context to users for things like language and text direction. Additionally, being able to control things like autocapitalize, maxlength, and minlength can help improve the user experience by a) guiding what should be entered into an input and b) removing autocapitalize where it's not appropriate.

What is the new behavior?

  • Added autocapitalize, maxlength, and minlength properties
  • lang and dir are global attributes, so adding them as properties will cause issues. However, developers can still set them as attributes and they will be inherited to the native input element. We also watch them so any changes to the attributes are also inherited to the native input.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Note: We expanded the scope of this work to also include input and textarea, and this work will be handled separately. However, the original request was only for searchbar so that's why I associated this PR with the linked issue.

Dev build: 7.7.3-dev.11709159644.114cd8b1

@github-actions github-actions bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package labels Feb 28, 2024
@@ -3,13 +3,37 @@ import { newSpecPage } from '@stencil/core/testing';
import { Searchbar } from '../searchbar';

describe('searchbar: rendering', () => {
it('should inherit attributes', async () => {
it('should inherit properties on load', async () => {
Copy link
Contributor Author

@liamdebeasi liamdebeasi Feb 28, 2024

Choose a reason for hiding this comment

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

I did not test updating the properties because that would be testing Stencil behavior. I am, however, testing updating attributes to verify that I configured the attribute watchers correctly.

@liamdebeasi liamdebeasi marked this pull request as ready for review February 28, 2024 20:41
@liamdebeasi

This comment was marked as outdated.

@liamdebeasi liamdebeasi marked this pull request as draft February 28, 2024 22:06
Comment on lines +92 to +93
* In the future, this property will default to "off" to align with
* Input and Textarea, and the "!" will not be needed.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I can make a tech debt ticket for this, but my plan was to make the change once this is merged since Ionic 8 is in beta now (and we can still make breaking changes).

@liamdebeasi liamdebeasi marked this pull request as ready for review February 28, 2024 22:51
@liamdebeasi liamdebeasi merged commit a0a77f7 into feature-7.8 Mar 1, 2024
54 checks passed
@liamdebeasi liamdebeasi deleted the FW-5201 branch March 1, 2024 22:12
@liamdebeasi
Copy link
Contributor Author

Follow up PR: #29107

Blocked until feature-7.8 is merged into main (so it can be synced back to feature-8.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants