[select] feat(QueryList): add `ref` to `ItemRendererProps` #5815

shim-flounce · 2022-12-30T09:58:49Z

Fixes #3369

Checklist

Includes tests
Update documentation

Changes proposed in this pull request:

I didn't add any tests because it seems like there's no tests for scrolling, and I wasn't sure how to best write such a test:

blueprint/packages/select/test/queryListTests.tsx

Lines 215 to 217 in b6c1518

    
           describe("scrolling", () => { 
        
               it("brings active item into view"); 
        
           });

Reviewers should focus on:

getActiveElement being exposed as desired

Screenshot

packages/select/src/components/query-list/queryList.tsx

packages/select/src/common/listItemsProps.ts

packages/select/src/components/query-list/queryList.tsx

shim-flounce · 2023-01-07T00:12:02Z

@adidahiya Apologies for the direct ping, but do you have any thoughts on the proposed change?

adidahiya · 2023-01-10T17:01:37Z

The code seems reasonable so far, can you demonstrate usage of this new prop in the docs somehow? I think you'd need to design a new example option which uses itemListRenderer in a meaningful way. I'd prefer to add new props / functionality only if it's been unit tested or demonstrated clearly in docs-app.

shim-flounce · 2023-01-11T01:21:05Z

The code seems reasonable so far, can you demonstrate usage of this new prop in the docs somehow? I think you'd need to design a new example option which uses itemListRenderer in a meaningful way. I'd prefer to add new props / functionality only if it's been unit tested or demonstrated clearly in docs-app.

Makes sense! To be honest I just blindly followed the suggestion in the linked issue, but I think it’s a bit awkward to use (although it does satisfy my use case). I’ll try to see if there’s a better way to solve this and update the PR (might be a couple of weeks as I’m going on vacation though). Thanks for your review anyway!

shim-flounce · 2023-02-06T12:24:10Z

@adidahiya I've updated the Select example to include a grouped option that uses this new prop. That being said, I think it would be better to enhance ItemRendererProps with a ref and let users wire it up to the right element?

Fixes palantir#3369.

shim-flounce · 2023-02-08T10:25:14Z

packages/select/src/components/query-list/queryList.tsx

@@ -419,10 +428,12 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
        if (this.itemsParentRef != null) {
            if (isCreateNewItem(activeItem)) {
                const index = this.isCreateItemFirst() ? 0 : this.state.filteredItems.length;
-                return this.itemsParentRef.children.item(index) as HTMLElement;
+                return this.itemRefs.get(index) ?? (this.itemsParentRef.children.item(index) as HTMLElement);


The fallback is for backwards compat (if a user didn't wire up the new ref to elementRef on the MenuItem for example)

shim-flounce · 2023-02-08T10:26:31Z

@adidahiya I've changed the approach but kept the grouped example for you to verify scroll behaviour. I'm happy to drop the example though to keep the diff small.

shim-flounce · 2023-02-08T10:30:15Z

packages/select/src/components/query-list/queryList.tsx

@@ -394,6 +396,13 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
                index,
                modifiers,
                query,
+                ref: node => {


Followed approach in https://beta.reactjs.org/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback

shim-flounce · 2023-02-08T11:39:25Z

packages/select/src/components/query-list/queryList.tsx

@@ -422,7 +431,9 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
                return this.itemsParentRef.children.item(index) as HTMLElement;


Strictly speaking, we could also wire up a ref to createNewItemRenderer so that we can easily look it up, but I think even without doing so 0 and this.state.filteredItems.length should be good enough as indices.

adidahiya

nicely done @shim-flounce, I can clearly see this fixes the linked issue in the docs preview build:

shim-flounce commented Dec 30, 2022

View reviewed changes

packages/select/src/components/query-list/queryList.tsx Outdated Show resolved Hide resolved

shim-flounce force-pushed the getActiveElement branch from 0de3a04 to d05dc10 Compare December 30, 2022 10:02

shim-flounce commented Dec 30, 2022

View reviewed changes

packages/select/src/common/listItemsProps.ts Outdated Show resolved Hide resolved

shim-flounce commented Dec 30, 2022

View reviewed changes

packages/select/src/components/query-list/queryList.tsx Outdated Show resolved Hide resolved

shim-flounce commented Dec 30, 2022

View reviewed changes

packages/select/src/components/query-list/queryList.tsx Outdated Show resolved Hide resolved

shim-flounce mentioned this pull request Dec 30, 2022

[Select] custom itemListRenderer breaks scrollToActiveItem #3369

Closed

shim-flounce force-pushed the getActiveElement branch from 5fe690b to fcc349e Compare February 6, 2023 12:21

shim-flounce force-pushed the getActiveElement branch from d1cf787 to c658f2a Compare February 8, 2023 04:16

shim-flounce added 4 commits February 8, 2023 04:17

feat(QueryList): add getActiveElement prop

8939869

Fixes palantir#3369.

Move getActiveElement into ListItemsProps to allow customization

5a7f623

Expose filteredItems

a528e70

Add grouped Select example

7120387

shim-flounce force-pushed the getActiveElement branch from c658f2a to 7120387 Compare February 8, 2023 04:17

shim-flounce changed the title ~~feat(QueryList): add getActiveElement prop~~ feat(QueryList): add ref to ItemRendererProps prop Feb 8, 2023

shim-flounce changed the title ~~feat(QueryList): add ref to ItemRendererProps prop~~ feat(QueryList): add ref to ItemRendererProps Feb 8, 2023

shim-flounce force-pushed the getActiveElement branch from a1f24f5 to 48ab10e Compare February 8, 2023 10:23

shim-flounce commented Feb 8, 2023

View reviewed changes

shim-flounce force-pushed the getActiveElement branch from 48ab10e to e7b3f31 Compare February 8, 2023 11:30

shim-flounce commented Feb 8, 2023

View reviewed changes

Replace getActiveElement prop with ref in ItemRendererProps

6578ac0

shim-flounce force-pushed the getActiveElement branch from e7b3f31 to 6578ac0 Compare February 9, 2023 08:41

adidahiya approved these changes Feb 13, 2023

View reviewed changes

adidahiya changed the title ~~feat(QueryList): add ref to ItemRendererProps~~ [select] feat(QueryList): add ref to ItemRendererProps Feb 13, 2023

adidahiya merged commit 96c9143 into palantir:develop Feb 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[select] feat(QueryList): add `ref` to `ItemRendererProps` #5815

[select] feat(QueryList): add `ref` to `ItemRendererProps` #5815

shim-flounce commented Dec 30, 2022 •

edited

shim-flounce commented Jan 7, 2023

adidahiya commented Jan 10, 2023

shim-flounce commented Jan 11, 2023

shim-flounce commented Feb 6, 2023 •

edited

shim-flounce Feb 8, 2023

shim-flounce commented Feb 8, 2023

shim-flounce Feb 8, 2023 •

edited

shim-flounce Feb 8, 2023

adidahiya left a comment

	describe("scrolling", () => {
	it("brings active item into view");
	});

		@@ -422,7 +431,9 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
		return this.itemsParentRef.children.item(index) as HTMLElement;

[select] feat(QueryList): add ref to ItemRendererProps #5815

[select] feat(QueryList): add ref to ItemRendererProps #5815

Conversation

shim-flounce commented Dec 30, 2022 • edited

Fixes #3369

Checklist

Changes proposed in this pull request:

Reviewers should focus on:

Screenshot

shim-flounce commented Jan 7, 2023

adidahiya commented Jan 10, 2023

shim-flounce commented Jan 11, 2023

shim-flounce commented Feb 6, 2023 • edited

shim-flounce Feb 8, 2023

Choose a reason for hiding this comment

shim-flounce commented Feb 8, 2023

shim-flounce Feb 8, 2023 • edited

Choose a reason for hiding this comment

shim-flounce Feb 8, 2023

Choose a reason for hiding this comment

adidahiya left a comment

Choose a reason for hiding this comment

[select] feat(QueryList): add `ref` to `ItemRendererProps` #5815

[select] feat(QueryList): add `ref` to `ItemRendererProps` #5815

shim-flounce commented Dec 30, 2022 •

edited

shim-flounce commented Feb 6, 2023 •

edited

shim-flounce Feb 8, 2023 •

edited