diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
index 5f3d5eb341a..620d845698d 100644
--- a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
+++ b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
@@ -31,6 +31,10 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   onBlur?: (event?: any) => void;
   /** Accessibility label for the input */
   'aria-label'?: string;
+  /** Value for the input */
+  value?: string | number;
+  /** Placeholder value for the input */
+  placeholder?: string;
 }
 
 export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -43,6 +47,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   onBlur,
   'aria-label': ariaLabel = 'Type to filter',
   value: inputValue,
+  placeholder: inputPlaceHolder,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
@@ -64,7 +69,8 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
           onChange={handleChange}
           onFocus={onFocus}
           onBlur={onBlur}
-          value={inputValue}
+          value={inputValue || ''}
+          placeholder={inputPlaceHolder}
         />
       </span>
     </div>
diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap b/packages/react-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap
index 61eb544a120..1d0e1fefed5 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap
+++ b/packages/react-core/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`TextInputGroup gets custom class and id 1`] = `
             className="pf-c-text-input-group__text-input"
             onChange={[Function]}
             type="text"
+            value=""
           />
         </span>
       </div>
@@ -53,6 +54,7 @@ exports[`TextInputGroup renders content 1`] = `
             className="pf-c-text-input-group__text-input"
             onChange={[Function]}
             type="text"
+            value=""
           />
         </span>
       </div>
@@ -87,6 +89,7 @@ exports[`TextInputGroup renders with the proper stying when disabled 1`] = `
             disabled={true}
             onChange={[Function]}
             type="text"
+            value=""
           />
         </span>
       </div>
@@ -115,6 +118,7 @@ exports[`TextInputGroupMain renders content 1`] = `
         disabled={false}
         onChange={[Function]}
         type="text"
+        value=""
       />
     </span>
   </div>
@@ -172,6 +176,7 @@ exports[`TextInputGroupMain renders given input icon props 1`] = `
         disabled={false}
         onChange={[Function]}
         type="text"
+        value=""
       />
     </span>
   </div>
@@ -195,6 +200,7 @@ exports[`TextInputGroupMain renders the input with custom aria label when given
         disabled={false}
         onChange={[Function]}
         type="text"
+        value=""
       />
     </span>
   </div>
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
index ebc86cd6c28..9e5c40d352a 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
@@ -40,6 +40,9 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
   /** show the input/chip clearing button only when either the text input or chip group are not empty */
   const showClearButton = !!inputValue || !!currentChips.length;
 
+  /** render the utilities component only when a component it contains is being rendered */
+  const showUtilities = showClearButton;
+
   /** callback for clearing all selected chips and the text input */
   const clearChipsAndInput = () => {
     setCurrentChips([]);
@@ -57,13 +60,15 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
           ))}
         </ChipGroup>
       </TextInputGroupMain>
-      <TextInputGroupUtilities>
-        {showClearButton && (
-          <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
-            <TimesIcon />
-          </Button>
-        )}
-      </TextInputGroupUtilities>
+      {showUtilities && (
+        <TextInputGroupUtilities>
+          {showClearButton && (
+            <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
+              <TimesIcon />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      )}
     </TextInputGroup>
   );
 };
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx
index d1266aea05f..828454d50ae 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx
@@ -14,6 +14,9 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
   /** show the input clearing button only when the input is not empty */
   const showClearButton = !!inputValue;
 
+  /** render the utilities component only when a component it contains is being rendered */
+  const showUtilities = showClearButton;
+
   /** callback for clearing the text input */
   const clearInput = () => {
     setInputValue('');
@@ -22,13 +25,15 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
   return (
     <TextInputGroup>
       <TextInputGroupMain icon={<SearchIcon />} value={inputValue} onChange={handleInputChange} />
-      <TextInputGroupUtilities>
-        {showClearButton && (
-          <Button variant="plain" onClick={clearInput} aria-label="Clear button and input">
-            <TimesIcon />
-          </Button>
-        )}
-      </TextInputGroupUtilities>
+      {showUtilities && (
+        <TextInputGroupUtilities>
+          {showClearButton && (
+            <Button variant="plain" onClick={clearInput} aria-label="Clear button and input">
+              <TimesIcon />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      )}
     </TextInputGroup>
   );
 };
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
index b2b2cc053ff..a5b7457d4cc 100644
--- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
+++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
@@ -205,12 +205,15 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     }
   };
 
-  /** only show the search icon when no chips are selected */
+  /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */
   const showSearchIcon = !currentChips.length;
 
   /** only show the clear button when there is something that can be cleared */
   const showClearButton = !!inputValue || !!currentChips.length;
 
+  /** render the utilities component only when a component it contains is being rendered */
+  const showUtilities = showClearButton;
+
   const inputGroup = (
     <div ref={textInputGroupRef}>
       <TextInputGroup>
@@ -229,13 +232,15 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
             ))}
           </ChipGroup>
         </TextInputGroupMain>
-        <TextInputGroupUtilities>
-          {showClearButton && (
-            <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
-              <TimesIcon />
-            </Button>
-          )}
-        </TextInputGroupUtilities>
+        {showUtilities && (
+          <TextInputGroupUtilities>
+            {showClearButton && (
+              <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
+                <TimesIcon />
+              </Button>
+            )}
+          </TextInputGroupUtilities>
+        )}
       </TextInputGroup>
     </div>
   );
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
index 475e29b5a30..089f0426e89 100644
--- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
+++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
@@ -92,11 +92,11 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
     }
   };
 
-  const handleTab = (event: React.KeyboardEvent) => {
+  const handleTab = () => {
     if (menuItems.length === 3) {
       setInputValue(menuItems[2].props.children);
-      event.preventDefault();
     }
+    setMenuIsOpen(false);
   };
 
   /** close the menu when escape is hit */
@@ -129,7 +129,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
         handleEscape();
         break;
       case 'Tab':
-        handleTab(event);
+        handleTab();
         break;
       case 'ArrowUp':
       case 'ArrowDown':
@@ -166,19 +166,29 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
 
   /** enable keyboard only usage while focused on the menu */
   const handleMenuKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      setInputValue('');
-      focusTextInput();
-      setMenuIsOpen(false);
+    switch (event.key) {
+      case 'Tab':
+      case 'Escape':
+        event.preventDefault();
+        focusTextInput();
+        setMenuIsOpen(false);
+        break;
+      case 'Enter':
+      case ' ':
+        setTimeout(() => setMenuIsOpen(false), 0);
+        break;
     }
   };
 
-  /** only show the search icon when no chips are selected */
+  /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */
   const showSearchIcon = !currentChips.length;
 
   /** only show the clear button when there is something that can be cleared */
   const showClearButton = !!inputValue || !!currentChips.length;
 
+  /** render the utilities component only when a component it contains is being rendered */
+  const showUtilities = showClearButton;
+
   const inputGroup = (
     <div ref={textInputGroupRef}>
       <TextInputGroup>
@@ -188,6 +198,8 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
           onChange={handleInputChange}
           onFocus={() => setMenuIsOpen(true)}
           onKeyDown={handleTextInputKeyDown}
+          placeholder="search"
+          aria-label="Search input"
         >
           <ChipGroup>
             {currentChips.map(currentChip => (
@@ -197,13 +209,15 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
             ))}
           </ChipGroup>
         </TextInputGroupMain>
-        <TextInputGroupUtilities>
-          {showClearButton && (
-            <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
-              <TimesIcon />
-            </Button>
-          )}
-        </TextInputGroupUtilities>
+        {showUtilities && (
+          <TextInputGroupUtilities>
+            {showClearButton && (
+              <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button for chips and input">
+                <TimesIcon />
+              </Button>
+            )}
+          </TextInputGroupUtilities>
+        )}
       </TextInputGroup>
     </div>
   );