Only show a transparent background on input box if there is no typeahead

CHANGELOG.md

@@ -1,9 +1,9 @@
 # Changelog
 
-### 1.1.2 (13 Mar 2022)
+### 1.1.2 (Unreleased)
 
+- Add screengrab GIF to README
 - Add Turnstone logo to README
-- Add Turnstone screengrab gif to README
 
 ### 1.1.1 (12 Mar 2022)
 

examples/geo/styles/autocomplete.module.css

@@ -31,8 +31,7 @@
   }
 }
 
-.query,
+.input {
-.typeahead {
   box-sizing: border-box;
   width: 100%;
   height: 2.5em;
@@ -42,10 +41,10 @@
   margin: 0;
   outline: none;
   border: 1px solid #ccc;
+  background: #fff;
 }
 
-.containerFocus .query,
+.containerFocus .input {
-.containerFocus .typeahead {
   border-top: none;
   border-left: none;
   border-right: none;
@@ -54,14 +53,12 @@
 }
 
 @media (min-width: 640px) {
-  .query,
+  .input {
-  .typeahead {
     width: 500px;
     font-size: 1.4em;
   }
 
-  .containerFocus .query,
+  .containerFocus .input {
-  .containerFocus .typeahead {
     border: 1px solid #ccc;
     padding: 0 1.5em 0 .5em;
   }

examples/geo/styles/index.css

@@ -8,6 +8,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: #f0f0f0;
 }
 
 a {

src/lib/components/__snapshots__/container.test.jsx.snap

@@ -24,9 +24,7 @@ exports[`Container > Component renders correctly 1`] = `
     spellCheck="false"
     style={
       {
-        "backgroundColor": "transparent",
         "position": "relative",
-        "zIndex": 1,
       }
     }
     type="text"

src/lib/components/container.jsx

@@ -6,7 +6,7 @@ import { useDebounce } from 'use-debounce'
 import useData from './hooks/useData'
 import undef from '../utils/undef'
 import isUndefined from '../utils/isUndefined'
-import defaultStyles from './styles/input.styles.js'
+import defaultStyles from './styles/container.styles.js'
 import {
   useItemsState,
   useItemsError,
@@ -90,6 +90,7 @@ export default function Container(props) {
     : defaultStyles[containerClassname]
   const inputClassName = hasFocus ? 'inputFocus' : 'input'
   const inputStyles = customStyles[inputClassName] || customStyles.input
+  const queryDefaultStyle = hasTypeahead ? defaultStyles.query : defaultStyles.queryNoTypeahead
 
   // Checks whether or not SWR data is to be treated as immutable
   const isImmutable = (() => {
@@ -225,7 +226,7 @@ export default function Container(props) {
           id={id}
           name={name}
           className={`${inputStyles || ''} ${customStyles.query || ''}`.trim()}
-          style={defaultStyles.query}
+          style={queryDefaultStyle}
           disabled={disabled}
           placeholder={placeholder}
           type='text'

src/lib/components/styles/container.styles.js

@@ -10,6 +10,9 @@ const styles = {
     zIndex: 1,
     backgroundColor: 'transparent'
   },
+  queryNoTypeahead: {
+    position: 'relative'
+  },
   typeahead: {
     position: 'absolute',
     zIndex: 0,