fix: add special treatment for textareas, fixes #74

src/handleScroll.ts

@@ -1,23 +1,23 @@
 import { Axis } from './types';
 
-const elementCouldBeVScrolled = (node: HTMLElement): boolean => {
-  const styles = window.getComputedStyle(node);
-
-  return (
-    styles.overflowY !== 'hidden' && // not-not-scrollable
-    !(styles.overflowY === styles.overflowX && styles.overflowY === 'visible') // scrollable
-  );
-};
+const alwaysContainsScroll = (node: HTMLElement): boolean =>
+  // textarea will always _contain_ scroll inside self. It only can be hidden
+  node.tagName === 'TEXTAREA';
 
-const elementCouldBeHScrolled = (node: HTMLElement): boolean => {
+const elementCanBeScrolled = (node: HTMLElement, overflow: 'overflowX' | 'overflowY'): boolean => {
   const styles = window.getComputedStyle(node);
 
   return (
-    styles.overflowX !== 'hidden' && // not-not-scrollable
-    !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable
+    // not-not-scrollable
+    styles[overflow] !== 'hidden' &&
+    // contains scroll inside self
+    !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === 'visible')
   );
 };
 
+const elementCouldBeVScrolled = (node: HTMLElement): boolean => elementCanBeScrolled(node, 'overflowY');
+const elementCouldBeHScrolled = (node: HTMLElement): boolean => elementCanBeScrolled(node, 'overflowX');
+
 export const locationCouldBeScrolled = (axis: Axis, node: HTMLElement): boolean => {
   let current = node;
 

stories/text-area.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import ReactRemoveScroll from '../src/Combination';
+
+export const TextAreaOverflow = () => (
+  <ReactRemoveScroll>
+    <div>
+      <textarea>{'hello'.repeat(500)}</textarea>
+    </div>
+  </ReactRemoveScroll>
+);
+
+export default {
+  title: 'textarea',
+};