Focus removed from input elements

[tim-eastwood]

I'm using Tailwind-css on react, and can replicate with this code:

import React from "react";
import ScrollContainer from "react-indiana-drag-scroll";

const Component = (args: any) => {
  return (
    <ScrollContainer className="scroll-container flex" horizontal>
      <div className="bg-red-300 p-24">Stuff</div>
      <div className="bg-green-300 p-24">Things</div>
      <div className="bg-red-300 p-24">
        <input type="text" />
      </div>
      <div className="bg-green-300 p-24">Things</div>
      <div className="bg-red-300 p-24">Stuff</div>
      <div className="bg-green-300 p-24">Things</div>
    </ScrollContainer>
  );
};

In situations where the container is wider than the parent and scrolling is enabled, I cannot select the input - it's like the click is ignored. If the container doesn't overflow, and therefore there is no scrolling, it works as expected. The input's onClick event does fire however, and this hacky workaround fixes the issue:

<input onClick={(e) => e.target.focus()} />

So it seems something is causing the input to un-focus after the ScrollContainer is clicked.

Cheers

[Norserium]

@Energiz3r, what's the version do you use? Try to ignore input elements.

import React from "react";
import ScrollContainer from "react-indiana-drag-scroll";

const Component = (args: any) => {
  return (
    <ScrollContainer className="scroll-container flex" ignoreElements="input" horizontal>
      <div className="bg-red-300 p-24">Stuff</div>
      <div className="bg-green-300 p-24">Things</div>
      <div className="bg-red-300 p-24">
        <input type="text" />
      </div>
      <div className="bg-green-300 p-24">Things</div>
      <div className="bg-red-300 p-24">Stuff</div>
      <div className="bg-green-300 p-24">Things</div>
    </ScrollContainer>
  );
};