OK, got a very weird, very specific issue that I am having with product filters on category pages
As the title suggests, the
getActiveCategoryFilters getter (
$store.state.category.filters.chosen) is not updating in real time when I apply a product filter. However it only happens on iOS Safari, and only in production - literally every other browser is fine, and in local development it works fine too.
I have changed my GenericSelector component so that it uses a radio button, which has the following template:
<template> <label :for="id" class="c-pj-form--radio"> <input type="radio" :id="id" :value="optionValue" @change="handleInput" :checked="checked" /> <span class="c-pj-form--radio__indicator" /> <span class="c-pj-form--radio__content"> <!-- @slot default Label text to display --> <slot /> </span> </label> </template>
handleInput emits an input event with the value of the radio button (the ID of the attribute). The GenericSelector component then listens to this event and runs
this.switchFilter(id, label);. From what I can see, it applies the filter to the products, so it must be getting added to ES queries, however there is no visual indicator to the user that the filter has been applied. Usually, the radio button is “filled” and you get a list of the tags that have been filled in, but this doesnt happen… only on iOS safari… only in production.
Just to make things even more awkward, if you navigate to a category page via vue-router links, the filters work fine, but if you land on, or reload the page, then it breaks.
I know 100% that no one has ever come across this before, but might anyone have any idea which direction I should look into to try and resolve this? I don’t want to go down a deep path of event handlers that Safari can and can’t support, but I have spent literally months trying to figure this out.
To help, I am using VSF 1.9.2. I have tried with the bundled GenericSelector and I get the same output, so just hoping anyone will be able to point me in the right direction of where I can start to debug this