noSwiping not working for elements in shadow DOM

Aarkon commented 4 years ago

This is a (multiple allowed):

[x] bug
[x] enhancement
[ ] feature-discussion (RFC)
Swiper Version: 5.3.0
Platform/Target and Browser Versions: Firefox, Chrome (not tested on Safari but I expect no difference there)

What you did

I have a project with Web Components, featuring text inputs inside the Shadow DOM and the Swiper instantiated in the host, the "Light" DOM. I'd like to be able to enter text in those inputs, therefore I need to disable swiping on those elements (otherwise you can't place the text cursor them).

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">

    <title>Swiper Test</title>
</head>

<body>
    <header>
        <h1>Todos!</h1>
    </header>

    <div class="swiper-container">
    <p class="swiper-no-swiping">here we go:</p>
      <!-- Additional required wrapper -->
      <todo part="todo" class="swiper-wrapper"></todo>
          <!-- Slides -->

      </div>
        <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>

    <script src="./index.js" type="module"></script>
    <script src="https://unpkg.com/swiper/js/swiper.js"></script>

  <script>
  const mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
    noSwipingSelector: 'input'
  });
  </script>

</body>
</html>

index.js:

import './todoSD.js'

window.addEventListener('load', () => {
    const wrapper = document.querySelector('todo');

    fetchToDos().then(json => {
        json.forEach((todo) => {
            const todoElement = document.createElement('todo-item');
            todoElement.todo = todo;
            todoElement.classList.add("swiper-slide");
            wrapper.appendChild(todoElement);
        })
    });
});

async function fetchToDos() {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos');
    return await res.json();
}

todoSD.js:

class Todo extends HTMLElement {

    constructor() {
        super();
        this.root = this.attachShadow({mode: 'open'});
    }
    set todo(todo) {
        this.root.innerHTML = `
            <h2>${todo.title}</h2>
            <p>Number: ${todo.id}</p>
            <p>completed: ${todo.completed}</p>
            <input type="text" class="swiper-no-swiping no-swiping">
        `;
    }
}

customElements.define('todo-item', Todo);

Expected Behavior

Passing something either noSwipingSelector: 'input' to the swiperOptions or attaching class="swiper-no-swiping" to the inputs should disable swiping on the corresponding element. And in fact, everything works fine if I ditch the Shadow DOM. See todo.js for reference:

class Todo extends HTMLElement {

    set todo(todo) {
        this.innerHTML = `
            <h2>${todo.title}</h2>
            <p>Number: ${todo.id}</p>
            <p>completed: ${todo.completed}</p>
            <input type="text">
        `
    }
}

customElements.define('todo-item', Todo);

Actual Behavior

Using the Shadow DOM option, neither option is effective. I can't observe any difference in behaviour whether I supply a noSwipingSelector, the predefined CSS class, a self defined one or any combination of the above.

If I had to put my money somewhere, I'd humbly suggest that the onTouchStart function needs to inspect the handed in events more deeply, but I'm not an expert on Web Components. Anyway, thank you for the great work so far!

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 4 years ago

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

nolimits4web / swiper