fix: input contents are moved to the left due to space char (#4823)

* fix: input was moved to the left due to space char * chore: add changeset file * fix: input display on a new line when using multi select * fix: change whitespace from `nowrap` to `pre` to preserve whitespace
JedWatson · Oct 5, 2021 · 0937604 · 0937604
1 parent 8b38d49
commit 0937604
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/funny-timers-glow.md b/.changeset/funny-timers-glow.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Fix the issue where input contents are moved to the left due to multiple space characters.
diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`defaults - snapshot 1`] = `
 .emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
-  white-space: nowrap;
+  white-space: pre;
   grid-area: 1/2;
   font: inherit;
   min-width: 2px;

diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`defaults - snapshot 1`] = `
 .emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
-  white-space: nowrap;
+  white-space: pre;
   grid-area: 1/2;
   font: inherit;
   min-width: 2px;

diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`defaults - snapshot 1`] = `
 .emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
-  white-space: nowrap;
+  white-space: pre;
   grid-area: 1/2;
   font: inherit;
   min-width: 2px;

diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`snapshot - defaults 1`] = `
 .emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
-  white-space: nowrap;
+  white-space: pre;
   grid-area: 1/2;
   font: inherit;
   min-width: 2px;

diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`defaults > snapshot 1`] = `
 .emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
-  white-space: nowrap;
+  white-space: pre;
   grid-area: 1/2;
   font: inherit;
   min-width: 2px;

diff --git a/packages/react-select/src/components/Input.tsx b/packages/react-select/src/components/Input.tsx
@@ -68,7 +68,7 @@ const containerStyle = {
   '&:after': {
     content: 'attr(data-value) " "',
     visibility: 'hidden',
-    whiteSpace: 'nowrap',
+    whiteSpace: 'pre',
     ...spacingStyle,
   },
 } as const;