Navigation component missing an important feature

Feature Requests
,
1

The Navigation component has some control over display on overflow. I am using the Horizontal Orientation and scrolling arrows appear at the left and right ends of the component when needed. I have set the Overflow mode to Scroll.

The problem is that there are times when I want the component to scroll to the beginning after the user has done something that causes the dataset behind the component to be modified.

I foolishly wasted an hour fiddling with scrollIntoView not working until I realized it applies to the component's position within the parent container, not the contents of the component itself. I would guess that the functionality I am seeking would be a method like scrollToRow. Alas....

navigation_foo.scrollToRow is not a function

Please advise.

2

Hi @Roland_Alden,

Just to clarify, we're talking about the scrolling within the Menu items (<- | ->) and not the items inside of the dropdown of a single menu item, right?

Example:

Screenshot 2024-10-24 at 4.24.21 PM
Screenshot 2024-10-24 at 4.24.21 PM2086×250 18.8 KB

3

Yes. In my case there are no dropdowns. The component is basically a horizontally scrolling row of buttons as you demonstrate above.

My objective is to be able to programmatically scroll to item "test01" so the user does not see "st17 test18..." etc. as shown above.

FWIW I'm not using the logo feature.

4

Got it. This is great feedback, thank you. We created the internal FR and will update you here with any news. :slightly_smiling_face:

5

Hi @Roland_Alden, while our devs work on this feature. If we need to scroll back to the start of the block, we could do:

navigation2.setHidden(true)

setTimeout(() => {
  navigation2.setHidden(false)
}, 10)

This will cause a re-render of the whole bar, which will reset it to its initial position.

1 Like
6

Clever! I will give it a try.

1 Like
7

Seems to work. I did something slightly different:

navigation2.setHidden(true);
// code that causes navigation2 to be modified
navigation2.setHidden(false);

Didn't do setTimeout(). What is the theoretical benefit?

8

I would assume that wrapping in a timeout, lets the first call to setHidden re-render, then "instantly" re-render again after the timeout, back to the beginning.

Without the timeout, I am guessing that the two setHidden calls would cause the visibility to flip true/false within that same render cycle, and re-render to the same state.

9

Exactly, we're just delaying the latter call by 10ms to prevent a race condition that may cause the component to stay hidden.

1 Like
10

If that is the concern wouldn't this work deterministically?

await navigation2.setHidden(true);
// await code that causes navigation2 to be modified
await navigation2.setHidden(false);

Since the code that modifies the navigation2 component runs very fast introducing a delay seems like it could make a "flashing" effect be more likely to be visible.

As is I can't see any flashing at all.

1 Like
11

I was afraid navigation2.setHidden(true) would take more than 10ms but if this prevents the flashing, this is better! :sunglasses:

1 Like
12

What may be important:

  1. The component is set to Maintain space when hidden so none of the surrounding layout needs to be disturbed when it is hidden.
  2. The component is actually never hidden (as far as the eye can see). But it does scroll back to the left which is the effect I wanted.
2 Likes