Commit b5c451a8 authored by Robert Knight's avatar Robert Knight

Fix search button not expanding search bar in Safari

The search bar expands from 0 to 150px when the input is focused
but in Safari the <input> will not accept focus via
input.focus() if its max-width is _exactly_ 0px.

Setting it to a near-zero +ve value instead avoids the problem.

Fixes #2654
parent 887ac52d
...@@ -32,7 +32,13 @@ ...@@ -32,7 +32,13 @@
padding: 0px; padding: 0px;
width: 100%; width: 100%;
max-width: 0px; // the search box expands when focused, via a change in the
// `max-width` property. In Safari, the <input> will not accept
// focus if `max-width` is set to 0px so we set it to
// a near-zero positive value instead.
// See GH #2654
max-width: 0.1px;
transition: max-width .3s ease-out, padding-left .3s ease-out; transition: max-width .3s ease-out, padding-left .3s ease-out;
&:disabled { &:disabled {
...@@ -40,6 +46,8 @@ ...@@ -40,6 +46,8 @@
color: $gray-light; color: $gray-light;
} }
// expand the search input when focused (triggered by clicking
// on the search icon) or when `is-expanded` is applied
&:focus,&.is-expanded { &:focus,&.is-expanded {
max-width: $expanded-max-width; max-width: $expanded-max-width;
padding-left: 6px; padding-left: 6px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment