getActiveCategoryFilters not populating on iOS in production

Hi there

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

Thanks all

With a bit of debugging I’m getting the following error on my console:

Error in v-on handler: “TypeError: undefined is not an object (evaluating ‘this.$store.state.category.filters.chosen.brand.id’)”

This is me just trying to console.log(this.$store.state.category.filters.chosen.brand.id). Again, works with no issues in literally any other browser :cry: