Filter form: hitting the enter/return in a text field causes the scrollbar to disappear and page to become unscrollable

[JamesDPC]

Hey folks

Looking at

• https://digitalnsw.github.io/nsw-design-system/components/filters/blank.html
• https://digitalnsw.github.io/nsw-design-system/templates/content/filters.html
• https://nswdesignsystem.surge.sh/components/filters/blank.html and
• https://nswdesignsystem.surge.sh/templates/content-page-filters/index.html

On desktop size:

1. Find a text field eg. Keyword
2. Enter some text, hit enter/return
3. Scrollbar disappears, page becomes unscrollable

Looks like the body tag gets a filters-open class, which adds an overflow:hidden. I don't think this is required on desktop media sizes (or wherever the mobile "Filter results" component is not in use).

Expected result is that pressing enter in a field will submit the form.

(edit: should add that this is also happening on our implementations of the filter form )

Cheers
James

[tjharrop]

Hi James,

Good spot - thank you! We'll look into this. I did use the filters on a prototype SPA recently without getting this issue, which helps us narrow down where the issue is. Will add a resolve tag in the commit when we add the fix. Thanks especially for checking both v2 and v3 - we're a small team so this stuff really helps us.

Thanks!

TJ

[tjharrop]

Hi @JamesDPC - I've applied a CSS fix to this, which you can see at https://nswds-issue192.surge.sh/components/filters/blank.html. If possible, can you swap out the css on your page with the issue for https://nswds-issue192.surge.sh/css/main.css (or let me know where the page is, and I can do it) to double check it works for you?

[JamesDPC]

Thanks TJ, this works for me. It's the exact workaround we employed as well.

If .filters-open is only applied to the body tag, it might be worth prefixing the selector: body.filters-open this would avoid other elements with that class picking up the rule.

Cheers
James