Difference in handling between Chrome and Safari?

1

Hello!

I had previously posted about trying to do a subselect pattern using option groups and CSS to control what content is displayed in forms:

The problem I’m faced with is that the same code behaves differently between browser versions (using stimulus 1.0.1):

  • :white_check_mark:Chrome Desktop Version 67.0.3396.99
  • :x:Chrome mobile Version 67.0.3396.87
  • :x:Safari desktop Version 11.1.2 (13605.3.8)

This can be confirmed by visiting the above link - the code is there as well.

It used to work on Chrome mobile at some point, and I found it hard to try and debug it, as Chrome desktop’s mobile view worked, but now that I can confirm it’s not working in Safari too.

I’m not really sure if there’s a better way to perform this kind of filtering - or if there’s something subtle about how stimulus operates on different platforms? Any help is welcomed!

2

I think it is more a CSS problem rather than Stimulus. When opening your link on safari without doing anything the second list displays the options whereas they shouldn’t be displayed display: none for optgroup. same thing if I remove the Stimulus controller

not sure if this is still relevant but it could maybe explain what you are seeing

1 Like
3

I’ve faced a similar issue recently. This isn’t an issue with Stimulus, but with Safari. I presume that you used Chrome mobile on iOS in which case it used the same rendering engine as Safari.

You can’t hide select options with Safari. You have to completely remove them from the select box and re-render it every time when you want to “un-hide” removed options. That’s exactly what I did, but my use case was simpler and I’m not sure how to do it with yours.

1 Like
4

Also please check with Firefox desktop/mobile browser as well.