From 66bd7219c2852a372441a7ddffb160abc8cfaf98 Mon Sep 17 00:00:00 2001
From: Sasha Khamkov <sanusart@gmail.com>
Date: Sat, 19 Dec 2020 22:30:48 +0200
Subject: [PATCH] FIX (Input): breaking in two lines due to input, closes #138
 (#148)

* FIX (Input): breaking in two lines due to input, closes #138

* FIX (Input): breaking in two lines due to input, closes #138
---
 __tests__/__snapshots__/index.spec.js.snap    | 40 +++++++++++++------
 .../__snapshots__/Content.spec.js.snap        |  2 +
 .../__snapshots__/Input.spec.js.snap          |  4 ++
 src/components/Input.js                       |  2 +
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap
index 74f23b1e..eb151886 100644
--- a/__tests__/__snapshots__/index.spec.js.snap
+++ b/__tests__/__snapshots__/index.spec.js.snap
@@ -19,6 +19,8 @@ exports[`<Select/> component <Select/> is disabled 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(9ch + 5px);
   font-size: smaller;
 }
 
@@ -205,6 +207,8 @@ exports[`<Select/> component <Select/> renders correctly 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(9ch + 5px);
   font-size: smaller;
 }
 
@@ -350,6 +354,8 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(9ch + 5px);
   font-size: smaller;
 }
 
@@ -512,18 +518,6 @@ exports[`<Select/> component <Select/> renders with custom search function 1`] =
   flex-wrap: wrap;
 }
 
-.emotion-0 {
-  line-height: inherit;
-  border: none;
-  margin-left: 5px;
-  background: transparent;
-  font-size: smaller;
-}
-
-.emotion-0:focus {
-  outline: none;
-}
-
 .emotion-4 {
   text-align: center;
   pointer-events: none;
@@ -551,6 +545,20 @@ exports[`<Select/> component <Select/> renders with custom search function 1`] =
   stroke: #0074D9;
 }
 
+.emotion-0 {
+  line-height: inherit;
+  border: none;
+  margin-left: 5px;
+  background: transparent;
+  padding: 0;
+  width: calc(3ch + 5px);
+  font-size: smaller;
+}
+
+.emotion-0:focus {
+  outline: none;
+}
+
 <div>
   <div
     aria-expanded={false}
@@ -662,6 +670,8 @@ exports[`<Select/> component <Select/> renders with loading 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(9ch + 5px);
   font-size: smaller;
 }
 
@@ -832,6 +842,8 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(9ch + 5px);
   font-size: smaller;
 }
 
@@ -991,6 +1003,8 @@ exports[`<Select/> component <Select/> renders with separator 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(9ch + 5px);
   font-size: smaller;
 }
 
@@ -1107,6 +1121,8 @@ exports[`<Select/> component <Select/> renders with short color 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(9ch + 5px);
   font-size: smaller;
 }
 
diff --git a/__tests__/components/__snapshots__/Content.spec.js.snap b/__tests__/components/__snapshots__/Content.spec.js.snap
index 26012b8b..ad9132be 100644
--- a/__tests__/components/__snapshots__/Content.spec.js.snap
+++ b/__tests__/components/__snapshots__/Content.spec.js.snap
@@ -53,6 +53,8 @@ exports[`<Clear/> component <Content/> renders correctly 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(undefinedch + 5px);
   font-size: smaller;
   cursor: pointer;
 }
diff --git a/__tests__/components/__snapshots__/Input.spec.js.snap b/__tests__/components/__snapshots__/Input.spec.js.snap
index d4714042..b7f130b4 100644
--- a/__tests__/components/__snapshots__/Input.spec.js.snap
+++ b/__tests__/components/__snapshots__/Input.spec.js.snap
@@ -6,6 +6,8 @@ exports[`<Input/> is disabled 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(undefinedch + 5px);
   font-size: smaller;
 }
 
@@ -31,6 +33,8 @@ exports[`<Input/> renders correctly 1`] = `
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(undefinedch + 5px);
   font-size: smaller;
 }
 
diff --git a/src/components/Input.js b/src/components/Input.js
index 2023943f..96aeb1af 100644
--- a/src/components/Input.js
+++ b/src/components/Input.js
@@ -100,6 +100,8 @@ const InputComponent = styled.input`
   border: none;
   margin-left: 5px;
   background: transparent;
+  padding: 0;
+  width: calc(${({ size }) => `${size}ch`} + 5px);
   font-size: smaller;
   ${({ readOnly }) => readOnly && 'cursor: pointer;'}
   :focus {