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

Focus on card search input when adding new card #23309

Merged
merged 4 commits into from
Dec 16, 2024

Conversation

marcinbauer85
Copy link
Contributor

Breaking change

None.

Proposed change

  • set focus to "Search cards" input when opening the to search cards faster

Type of change

  • UX quality of life improvement
  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Additional information

  • Please verify if it works properly on mobile.

Checklist

  • The code change is tested and works locally.
  • There is no commented out code in this PR.
  • Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
@bramkragten bramkragten marked this pull request as draft December 16, 2024 13:14
@MindFreeze
Copy link
Contributor

Doesn't seem to work

@bramkragten
Copy link
Member

Doesn't seem to work

yeah I fixed it

@bramkragten bramkragten marked this pull request as ready for review December 16, 2024 13:31
@@ -120,7 +127,7 @@ export class HuiCreateDialogCard
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_card"
)}
dialogInitialFocus
dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
.dialogInitialFocus=${Boolean(this._narrow)}

I think this is simpler

Copy link
Member

@bramkragten bramkragten Dec 16, 2024

Choose a reason for hiding this comment

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

It is not possible, the dialog searches for an attribute, not for a property

@@ -133,6 +140,7 @@ export class HuiCreateDialogCard
this._currTabIndex === 0
? html`
<hui-card-picker
dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
.dialogInitialFocus=${Boolean(this._narrow)}

Comment on lines +69 to +71
this._narrow = matchMedia(
"all and (max-width: 450px), all and (max-height: 500px)"
).matches;
Copy link
Contributor

Choose a reason for hiding this comment

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

Side note: we should make this a utility function at some point

@MindFreeze MindFreeze merged commit 8722157 into home-assistant:dev Dec 16, 2024
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants