Toggle should scroll to target so that it is visible in the viewport

[Flimm]

Take this code, taken from the documentation for Toggle:

<button uk-toggle="target: #my-id" type="button"></button>
<p id="my-id"></p>

If a user clicks on the button in order to display a hidden target, the viewport should be scrolled so that the target is at least partly visible. Otherwise, it can seem like the button did not do anything at all, especially when the button is right on the edge of the viewport. This edge case is quite frequent on small screens. Right now, the button only toggles the display of the target, it does not scroll at all, even when the target is completely out of sight.

There is a handy scrollIntoView JavaScript method that could be used here to implement this functionality.

Without this feature, I do not think toggle's usability is good enough to warrant use. So it's a fairly high priority, in my opinion.

[dobaniashish]

I have mostly used toggle component to toggle an adjacent or nearby element only. This is an interesting use case. I usually write a separate code for toggling if required to use like that.

Also, I think scrollIntoView only makes sense if the mode is set to click and there is only one matching target element.

Until this issue is considered, maybe you can extend the toggle component for your use case.

UIkit.component('customToggle', UIkit.component('toggle').extend({
	events: [
		{
			name: 'show',
			el: ({ target }) => target,
			handler(e) {
				UIkit.util.scrollIntoView(e.target);
			},
		},
	],
}));

And then use the new component with uk-custom-toggle attribute.

[Flimm]

Thanks, that's helpful, and I agree with what you said.

I would like to clarify that scrolling is still needed, even if the target is "adjacent or nearby", as you say. It's quite possible for the target to be out of view, even if it is adjacent. This is especially likely if the screen is small. Users who are new to the interface may not realise that the target is off-screen. They may click the toggle button and think that nothing happened. If the target is already visible, in that case, scrolling is not needed.