Prevent display style overrides from sites (#397)

* fix: add display block forced style * fix: log for debugging * mor log * fix: remove logs * fix: add changeset * Update .changeset/two-turkeys-join.md Co-authored-by: Mateusz Burzyński <[email protected]> --------- Co-authored-by: Mateusz Burzyński <[email protected]>
Andarist · Oct 10, 2024 · bf3cad8 · bf3cad8
1 parent 5953e02
commit bf3cad8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/two-turkeys-join.md b/.changeset/two-turkeys-join.md
@@ -0,0 +1,5 @@
+---
+'react-textarea-autosize': patch
+---
+
+Force `display: block` for the hidden textarea to prevent other styles from overriding it and thus breaking the resizing functionality
diff --git a/src/calculateNodeHeight.ts b/src/calculateNodeHeight.ts
@@ -1,5 +1,5 @@
-import { SizingData } from './getSizingData';
 import forceHiddenStyles from './forceHiddenStyles';
+import { SizingData } from './getSizingData';
 
 // TODO: use labelled tuples once they are avaiable:
 //   export type CalculatedNodeHeights = [height: number, rowHeight: number];

diff --git a/src/forceHiddenStyles.ts b/src/forceHiddenStyles.ts
@@ -8,6 +8,7 @@ const HIDDEN_TEXTAREA_STYLE = {
   'z-index': '-1000',
   top: '0',
   right: '0',
+  display: 'block',
 } as const;
 
 const forceHiddenStyles = (node: HTMLElement) => {