Initial category button steals focus from an inline picker

[Tanza3D]

I'm spawning one of my website's custom popup objects with a picmo inside it, but the second it's created the page immediately scrolls down to the picker, even though it's completely hidden. I suspect this is due to autofocus of an element, even though in my create function I have "autoFocusSearch" set to false. I'd prefer not to use picmo's popup solution if possible, but if that is the only way forward I'm fine to use that.

Page in question: https://osekai.net/profiles/?user=2 (you can see on load it scrolls to around where picmo is)

https://user-images.githubusercontent.com/33783503/180637745-1e121b54-7600-42e9-aebb-4b65bca0f476.mp4

if (document.getElementById("comments__emoji_container")) {
    var emoji = document.getElementById("comments__emoji_container");
    const picker = picmo.createPicker({
        rootElement: emoji,
        className: 'osekai__emoji-picker',
        autoFocusSearch: false,
    });
    picker.addEventListener('emoji:select', selection => {
        document.getElementById("comments__input").value += selection.emoji;
    });
}

Is this a bug or am I doing something wrong?

[joeattardi]

I think I see what's happening - when autoFocusSearch is false, the picker will still automatically set the focus to the first focusable emoji in the picker. This is left over from when PicMo was only shown in a popup where it makes sense to do this as soon as it is created, but for an inline picker like you have here it doesn't make sense.

I think currently your only options are:

• Use the popup picker functionality in the @picmojs/popup-picker package, or
• In your own popup element, don't create the picker until the popup is opened the first time. For the inline picker, the auto focus behavior will only happen once, when the picker is created.

There may be another way to move the focus back, but at that point your page is already scrolled.

I think I need to improve the autofocusing feature by allowing one of three actions:

• Auto focus the search (autoFocusSearch)
• Auto focus the emoji area
• No auto focus

I can introduce a new option called initialFocus or something that takes one of these three values. This should be easy to do, will follow up with yo soon.

[joeattardi]

This has been implemented and will be included in the 5.4.0 release which is coming soon, there are a few other things I want to include.

There will be a new autoFocus option that accepts one of three values:

• search (autofocuses search)
• emojis (autofocus the emoji area)
• none (this is what you want)

The option is not required, so leaving it undefined will also have the same effect as none.

[Tanza3D]

Thank you for the help! It's really appreciated ❤️ - I'll be waiting for the new release! :3

[joeattardi]

I just released v5.4.0 which should fix your issue.

[Tanza3D]

I had to set autoFocus to none for it to work, but after doing that it works flawlessly! Thanks for the help! edit: actually, that's throwing an error.. i'll post another comment when i can get it working

[Tanza3D]

Leaving it undefined still scrolls down, and setting it to none ends up with an error.

const picker = picmo.createPicker({
    rootElement: emoji,
    className: 'osekai__emoji-picker',
    autoFocus: none
});

I've updated my picmo version to 5.4.0 from the CDN (https://unpkg.com/picmo@5.4.0/dist/umd/picmo.js). Might I be doing something wrong here?

[joeattardi]

none should be a string: autoFocus: 'none', does it work then?

[Tanza3D]

afraid that has not done anything to help. the page is still scrolling down 😅

[joeattardi]

The CDN version you linked includes the change for autoFocus, if the value is 'none' or undefined it should not do any autofocus. Is there something else in your code that could be triggering a focus operation?

[Tanza3D]

if i simply comment out the picmo code, it immediately stops doing the focus/scroll. and beyond theming i haven't modified picmo at all. i can't think of any reason it'd be autoscrolling if simply removing picmo fixes it, sadly

[joeattardi]

There must be something else going on. Are you sure that it's a focus operation that is causing the scroll? Your site looks pretty complicated but any chance you can provide a simpler example that exhibits the problem?

I will reopen this issue since it looks like the autoFocus option did not resolve the issue.

[Tanza3D]

i've made a little codepen which shows off the issue, hope it helps! https://codepen.io/Hubz/pen/VwXQoZK

[joeattardi]

That was super helpful! I have found the issue. When setting the initial category, I was accidentally focusing the button which is what's causing your issue.

I want to do some further testing to make sure I didn't break focus elsewhere, but should have a fix ready soon.

[joeattardi]

Hi, I just published version 5.4.1. Can you try this out and let me know if it fixes your issue?

[Tanza3D]

that's fixed it, thank you so much!