Disable autosubmit with media query

Created on 2 June 2024, 11 months ago

Problem/Motivation

I need to disable the auto-submit feature for mobile devices as exposed filters should be submitted with the button on mobile devices for a better user experience. Having such functionality from the box is a good idea in my view.

Proposed resolution

This functionality can be implemented with media query to provide a flexible solution for disabling/enabling auto-submit based on the media query. So, this feature can be implemented by next steps:

  1. add new field to the "Exposed form options" form for media query
  2. pass media query from that field into form data attributes
  3. check media query to determinate whether auto-submit should be triggered
✨ Feature request
Status

Needs work

Version

7.0

Component

Code

Created by

πŸ‡ΊπŸ‡¦Ukraine chizh273

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @chizh273
  • Status changed to Needs review 11 months ago
  • πŸ‡ΊπŸ‡¦Ukraine chizh273

    I have added field to the "Exposed form options" form for media query and added checking this media query before triggering the submit button. Could someone review these changes, pls?

  • Pipeline finished with Success
    11 months ago
    Total: 216s
    #189060
  • Issue was unassigned.
  • Status changed to RTBC 11 months ago
  • Status changed to Needs work 11 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Will need an upgrade path and schema validation most likely

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    So for this one I don't think we should assume site builders know how to write media queries. Instead maybe the field should be a number field that sets up the media query.

  • πŸ‡ΊπŸ‡¦Ukraine chizh273

    We can use the breakpoint core module instead of the media query string. In this case, all breakpoints will be defined in the yml files, and the site builders will choose which one they want to use in the select list.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    I'd be fine with that approach!

  • Pipeline finished with Failed
    about 2 months ago
    Total: 206s
    #444556
  • Pipeline finished with Success
    about 2 months ago
    Total: 490s
    #445008
  • πŸ‡ΊπŸ‡¦Ukraine chizh273

    I have implemented the breakpoint approach in the 3452004--disable-autosubmit-with-7x branch.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Thanks, will probably need an upgrade hook for the new key

  • πŸ‡©πŸ‡ͺGermany yannickoo Berlin

    Hey I just checked the implementation in the MR and I am not sure if we want to rely on the breakpoints that are defined in the YAML file. What would you think about using a JS condition for this, e.g.

    if ('ontouchstart' in window)

  • πŸ‡ΊπŸ‡¦Ukraine chizh273

    chizh273 β†’ changed the visibility of the branch 7.1.x to hidden.

  • Pipeline finished with Success
    2 days ago
    Total: 355s
    #482946
  • πŸ‡ΊπŸ‡¦Ukraine chizh273

    chizh273 β†’ changed the visibility of the branch 3452004--disable-autosubmit-with-7-1-x to hidden.

  • πŸ‡ΊπŸ‡¦Ukraine chizh273

    The merge conflict is resolved.

    I'd say that we don't need an upgrade hook for the new key because these changes shouldn't affect any existing configurations. We have a whether breakpoint is not empty check, and the default value is an empty string, so existing configurations will skip the breakpoint part till it's configured.

    I don't think it will work as expected, as `ontouchstart` can be emitted on laptops with a touchscreen. Also, it wouldn't give us as much flexibility as breakpoints. For example, you have views with filters, which are hidden in a modal on mobile and tablet vertical orientation, but they are visible on tablet horizontal orientation and desktop. This means that filters shouldn't be auto-submitted when they are in modal, but they should be when they are visible on the page. So, from my point of view, the best way to implement it is with breakpoints, as you'd have a lot of flexibility and would reuse existing breakpoints from your theme.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    New keys should have an upgrade hook, if the key isn’t appearing then something seems wrong

  • Pipeline finished with Canceled
    about 20 hours ago
    Total: 75s
    #483786
  • πŸ‡ΊπŸ‡¦Ukraine chizh273

    The hook update is added

  • Pipeline finished with Failed
    about 20 hours ago
    Total: 1709s
    #483787
Production build 0.71.5 2024