Focus inputs when Mobiscroll is active

[lougreenwood]

I use the :focus-within CSS selector to style the container for a specific input.https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

This allows me to style the input, it's label and any other elements when they are in a focussed state.

This works well for normal inputs, however it seems that Mobiscroll doesn't properly handle this...

Expected behaviour (based on usual input & select behaviour`

• Click on/tab to Mobiscroll input
• See :focus-within CSS styling applied
• See MobiScroll input control appears
• Dismiss Mobiscroll input control
• See that :focus-within is still applied

Current incorrect behaviour:

• Click on/tab to Mobiscroll input
• No :focus-within CSS styling applied
• See MobiScroll input control appears
• Dismiss Mobiscroll input control
• See that :focus-within is applied

I'll be able to upload some videos which show correct and incorrect behaviour later

[dioslaska]

Thanks for the suggestion!
Currently I don't see a way to make this work with :focus or :focus-within pseudo classes. :focus-within only works if the focus is on a descendant element, however the popup is not a descendant of the input field.
What could be done, is to use a css class instead, which is added to the input when the popup opens, and removed when it's closed, and add the same styling as for the focused input.
Something like:

onShow: function () { 
    this.classList.add('focused');
},
onClose: function () {
    this.classList.remove('focused');
}

We might consider to make this built in, if it helps.