Search code examples
swiper.jsvue-select

How to disable blur call on the active element from SwiperJS in onTouchStart handler?


Is it possible to disable this blur call on the active element from SwiperJS in the onTouchStart event handler?

Some background:
For touch and desktop devices I'm using swiper for forms on swiper-slides. Within a form I'm using vue-select (a combobox).
The Problem: When the user selects an entry, the entry get not selected on the first time but on the second time.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div>First form</div>
      <v-select :options="selectionEntries"></v-select>
    </div>
    <div class="swiper-slide">
      <div>Second form</div>
      <v-select :options="selectionEntries"></v-select>
    </div>
  </div>
</div>

See also this example on codepen

I figured out that it seems to work correctly:

  • When I remove the blur-listener on the input field of the vue-select box. But it is used to close the selection list when the user leaves the field.
  • When I comment out this blur call in SwiperJS. I'm not sure why it is used there.

The first point is not an option, so is it possible to disable the blur call of SwiperJS via configuration?


Solution

  • Currently I'm using this workaround (SwiperJS V6.4.1):

    const swiper = new Swiper(".swiper-container", {
      // Workaround part 1:
      touchStartPreventDefault: false
    })
    // Workaround part 2:
    swiper.touchEventsData.formElements = 'notExistingHtmlTagName'
    

    Part 1: To handle mouse down and click events on all elements, set the swiper parameter touchStartPreventDefault: false. That will disable this code block: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-L97

    Part 2: Set swiper.touchEventsData.formElements = 'undefined' to define nothing as formElements. That will disable the code block that calls blur: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-L88