Adjust focus styling of textarea and input (#3965)

* Adjust focus styling

* Update tests

Author: dipree

src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -50,8 +51,8 @@ exports[`snapshots renders a custom empty state message 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  outline: none;
-  box-shadow: inset 0 0 0 1px #0969da;
+  outline: 2px solid #0969da;
+  outline-offset: -1px;
 }
 
 .c0 > textarea {
@@ -187,6 +188,7 @@ exports[`snapshots renders a loading state 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -216,8 +218,8 @@ exports[`snapshots renders a loading state 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  outline: none;
-  box-shadow: inset 0 0 0 1px #0969da;
+  outline: 2px solid #0969da;
+  outline-offset: -1px;
 }
 
 .c0 > textarea {
@@ -388,6 +390,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -417,8 +420,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 .c0:focus-within {
   border-color: #0969da;
-  outline: none;
-  box-shadow: inset 0 0 0 1px #0969da;
+  outline: 2px solid #0969da;
+  outline-offset: -1px;
 }
 
 .c0 > textarea {
@@ -1165,6 +1168,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -1194,8 +1198,8 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  outline: none;
-  box-shadow: inset 0 0 0 1px #0969da;
+  outline: 2px solid #0969da;
+  outline-offset: -1px;
 }
 
 .c0 > textarea {
@@ -1829,6 +1833,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -1858,8 +1863,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  outline: none;
-  box-shadow: inset 0 0 0 1px #0969da;
+  outline: 2px solid #0969da;
+  outline-offset: -1px;
 }
 
 .c0 > textarea {
@@ -2641,6 +2646,7 @@ exports[`snapshots renders a single select input 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -2670,8 +2676,8 @@ exports[`snapshots renders a single select input 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  outline: none;
-  box-shadow: inset 0 0 0 1px #0969da;
+  outline: 2px solid #0969da;
+  outline-offset: -1px;
 }
 
 .c0 > textarea {
@@ -3664,6 +3670,7 @@ exports[`snapshots renders with an input value 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   min-height: 32px;
+  overflow: hidden;
 }
 
 .c0 input,
@@ -3693,8 +3700,8 @@ exports[`snapshots renders with an input value 1`] = `
 
 .c0:focus-within {
   border-color: #0969da;
-  outline: none;
-  box-shadow: inset 0 0 0 1px #0969da;
+  outline: 2px solid #0969da;
+  outline-offset: -1px;
 }
 
 .c0 > textarea {