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

fix(combobx): display selected item when initally opened #11427

Merged
merged 3 commits into from
Feb 1, 2025

Conversation

josercarcamo
Copy link
Contributor

Related Issue: #9890

Summary

Scroll to display selected item when combobox is initially opened.

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jan 31, 2025
@josercarcamo josercarcamo added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 31, 2025
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

👍 Looks good @josercarcamo 🦖 💯

return;
}

const height = this.calculateScrollerHeight(activeItem);
const height = this.calculateScrollerHeight(item);
Copy link
Member

Choose a reason for hiding this comment

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

@josercarcamo instead of calculating the height, can you try the following:

item.scrollIntoView({ block: "nearest" });

I'm not sure calculating the offset is necessary.

@josercarcamo josercarcamo added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 31, 2025
@josercarcamo josercarcamo merged commit fcc4831 into dev Feb 1, 2025
14 checks passed
@josercarcamo josercarcamo deleted the josercarcamo/9890-selected-item-in-view branch February 1, 2025 00:16
private scrollToActiveItem(): void {
const activeItem = this.filteredItems[this.activeItemIndex];
private scrollToActiveOrSelectedItem(scrollToSelected = false): void {
const item =
Copy link
Member

@jcfranco jcfranco Feb 1, 2025

Choose a reason for hiding this comment

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

FYI, you can use the optional chaining operator to simplify these types of checks:

scrollToSelected && this.selectedItems?.length

We might be able to automate this with https://typescript-eslint.io/rules/prefer-optional-chain/.

Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

Awesome, stuff! @josercarcamo! I've added some follow-up comments.

Could you also fix the typo in the PR title and follow these steps to amend the conventional commit entry (see example)?

it("shows the selected item when initially opened", async () => {
const page = await newE2EPage();

await page.setContent(`
Copy link
Member

Choose a reason for hiding this comment

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

Can you follow this up by:

  • using the html formatting helper (example)
  • Removing any attributes not needed for the test – id doesn't seem to be used and optionally placeholder since the test name and assertion convey this
  • adding a test for the multiple selection case (one should suffice) for extra coverage
  • renaming item1 to something that matches the test

?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants