*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: nextcloud-libraries/nextcloud-vue#4633

Hopefully will be fixed by this PR: nextcloud-libraries/nextcloud-vue#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)
nextcloud-libraries/nextcloud-vue#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.

spreed/src/App.vue

Lines 488 to 490 in 47ea02c

	emit('toggle-navigation', {
	open: true,
	})

[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

loop.mp4

Workaround I have found so far is not showing the trailing button unless there is a non-empty value (reverts changes asked by @marcoambrosini #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]

• Upstream pill-style search input of conversation search #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:

• fix(NcAppNavigation): make toggle button not the first element for focus-trap nextcloud-libraries/nextcloud-vue#4864
• fix(NcAppNavigation): closed on mobile initially nextcloud-libraries/nextcloud-vue#4869