[WIP] Port clear status after select

[Pytal]

• For [BITV] User status dialog "Clear status after" menu entries need border for focus feedback #35763

Summary

Port the clear status after select to NcSelect

• FIXME Initial dropdown width is not equal to input width Fix calculated dropdown list width nextcloud-libraries/vue-select#14

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[Pytal]

The width property
https://github.com/sagalbot/vue-select/blob/857753655adbebae612518aab072ed7f4a8deaa0/src/directives/appendToBody.js#L4-L9
is ~10px less than it should be when opening the dropdown for the first time

Further investigations to be done

[Pytal]

The initial width issue on first open can be reproduced on Chrome on Windows and Linux

	Screenshot
Chrome (Windows)
Chrome (Linux)

Expected width

The width is normal when opening subsequent times

	Screenshot
Opening subsequent times

And also reproduces on Firefox on Windows but not Linux

	Screenshot
Firefox (Windows)
Firefox (Linux)

Further investigations needed

Edit: Fixed in nextcloud-libraries/vue-select#14 and the reason why Firefox (Linux) works is because it determined that overlay scrollbars should be used automatically as described in https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

[Pytal]

Does the bug in #36372 (comment) reproduce for you @artonge?

And based on the source of the width in https://github.com/sagalbot/vue-select/blob/v3.20.2/src/directives/appendToBody.js#L4-L9 and the assignment in https://github.com/nextcloud/nextcloud-vue/blob/v7.5.0/src/components/NcSelect/NcSelect.vue#L790-L791, any ideas how this could occur?

[artonge]

Does the bug in #36372 (comment) reproduce for you @artonge?

I can reproduce in Chrome on Linux and not on Firefox.

Maybe it is because the computation happens when the scale is less than 1 ?
It looks like we are animating the modal:
https://github.com/nextcloud/nextcloud-vue/blob/c1a15b3f6c5cec758cd0461b154821ef07fd5013/src/components/NcModal/NcModal.vue#L980-L983

[artonge]

It also happens if I open the modal, resize the window, which resize NcSelect. So probably nothing to do with the animation.

[Pytal]

Fixed upstream in nextcloud-libraries/vue-select#14

[Pytal]

Superseded by #36843