*Close sidebar* focused and visible after page load on mobile

[ChristophWurst]

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

---

Steps to reproduce

1. Open Talk on mobile browser

Expected behaviour

I see the conversation list or chat distraction free

Actual behaviour

This is probably an accessibility feature from nextcloud/vue. Maybe the focus after page load should be set elsewhere?

Talk app

Talk app version: (see apps admin page: /index.php/settings/apps)

Custom Signaling server configured: yes/no and version (see additional admin settings: /index.php/index.php/settings/admin/talk#signaling_server)

Custom TURN server configured: yes/no (see additional admin settings: /index.php/settings/admin/talk#turn_server)

Custom STUN server configured: yes/no (see additional admin settings: /index.php/settings/admin/talk#stun_server)

Browser

Microphone available: yes/no

Camera available: yes/no

Operating system: Windows/Ubuntu/...

Browser name: Firefox/Chrome/...

Browser version: 85/96/...

Browser log

``` Insert your browser log here, this could for example include: a) The javascript console log b) The network log c) ... ```

Server configuration

Operating system: Ubuntu/RedHat/...

Web server: Apache/Nginx

Database: MySQL/Maria/SQLite/PostgreSQL

PHP version: 8.0/8.1/8.2

Nextcloud Version: (see admin page)

List of activated apps:

``` If you have access to your command line run e.g.: sudo -u www-data php occ app:list from within your server installation folder ```

Nextcloud configuration:

``` If you have access to your command line run e.g.: sudo -u www-data php occ config:list system from within your Nextcloud installation folder ```

Server log (data/nextcloud.log)

``` Insert your server log here ```

[Antreesy]

Yep, came with this PR: https://github.com/nextcloud-libraries/nextcloud-vue/pull/4633

Hopefully will be fixed by this PR: https://github.com/nextcloud-libraries/nextcloud-vue/pull/4864

Focused search input on page load should be fine, i guess?

[ShGKme]

@nextcloud/designers Do you think we should have the sidebar initially opened on mobile by default? What about:

• Make it closed by default
• Make it configurable, so any app can decide

It is always annoying for me when I open a chat in a small window, because I need to close the sidebar first

[ChristophWurst]

Focused search input on page load should be fine, i guess?

On mobile this might cause the keyboard to show. So to add to the problem @ShGKme outlined above, you would have to close keyboard and sidebar to see the main content.

[marcoambrosini]

agree @ShGKme. I actually wouldn't even make it configurable. Do you have any use case in mind where the sidebar should be open when navigating to the page?

[ShGKme]

Do you have any use case in mind where the sidebar should be open when navigating to the page?

No. That's just how it has been working all the time :D (Since you created the mobile view of the sidebar) https://github.com/nextcloud-libraries/nextcloud-vue/pull/989

[marcoambrosini]

Sorry, I misinterpreted the issue. I thought we were talking about the right sidebar. Indeed, we need to have the left sidebar open only when the URL ends with /apps/spreed/

[szaimen]

Indeed, the sidebar should be closed by default on mobile. Apps are already able to overwrite this on their own. See e.g. https://github.com/nextcloud/spreed/blob/47ea02cbaaf335a6c6585d01e524394b7ea2ef87/src/App.vue#L488-L490

[Antreesy]

Also when focusing the search box, we're facing a loop for mobiles / desktops with small screen resolution:

• Tabbing from input moves the focus to the trailing button
• At the nextTick, trailing button will be deleted, as system assumes search field to be blurred
• No element to focus => focus-trap falls back to the first available element => input field again

https://github.com/nextcloud/spreed/assets/93392545/1223aad1-8e81-488b-a1aa-a9975978d933

Workaround I have found so far is not showing the trailing button unless there is a non-empty value (reverts changes asked by @marcoambrosini https://github.com/nextcloud/spreed/issues/9974)

[marcoambrosini]

@Antreesy as a fix, let's make the trailing button non-focusable tabindex="-1" if value === '' And in order for everyone to benefit from this and other perks of the search functionality, we should probably upstream this into a NcSearchInput component.

[nickvergessen]

• 7850 cough

[Antreesy]

let's make the trailing button non-focusable

There can't be enough direct DOM manipulations, but yeah, it does the job

[ShGKme]

Fixed by:

• https://github.com/nextcloud-libraries/nextcloud-vue/pull/4864
• https://github.com/nextcloud-libraries/nextcloud-vue/pull/4869