diff --git a/config/webpack.vendor.js b/config/webpack.vendor.js
index c5704d47720..ec35a32edfe 100644
--- a/config/webpack.vendor.js
+++ b/config/webpack.vendor.js
@@ -40,7 +40,6 @@ module.exports = [
    * Patternfly related
    */
   'patternfly-react',
-  'patternfly-react-extensions',
   '@patternfly/react-core',
   '@patternfly/react-icons',
   '@patternfly/react-table',
diff --git a/package.json b/package.json
index 874f3c4ff8b..40a2ced9f36 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
     "multiselect": "~0.9.12",
     "number_helpers": "^0.1.1",
     "os-browserify": "^0.3.0",
-    "patternfly-react-extensions": "^3.0.15",
     "patternfly-react": "^2.40.0",
     "patternfly": "^3.59.5",
     "prop-types": "^15.6.0",
diff --git a/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss b/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss
index f186e631fd3..61db3af090b 100644
--- a/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss
+++ b/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss
@@ -12,7 +12,6 @@
 
 // patternfly v3
 @import '~patternfly-react/dist/sass/_patternfly-react.scss';
-@import '~patternfly-react-extensions/dist/sass/_select.scss';
 @import '~patternfly/dist/sass/patternfly/_loading-state';
 
 // patternfly v5
diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js b/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js
index 6eee129e6c9..a174c67734b 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js
@@ -34,7 +34,6 @@ import {
   selectValue,
   selectShowError,
   selectIsSelectOpen,
-  selectHosts,
 } from './EditorSelectors';
 
 import { parseDocs } from './EditorHelpers';
@@ -230,11 +229,7 @@ export const fetchAndPreview = (
   }
 
   await dispatch(fetchHosts());
-  const hosts = selectHosts(getState());
-
-  if (hosts.length > 0)
-    dispatch(previewTemplate({ host: hosts[0], renderPath, templateKindId }));
-  else dispatch({ type: EDITOR_HIDE_LOADING });
+  dispatch({ type: EDITOR_HIDE_LOADING });
 };
 
 export const toggleModal = () => ({
diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js b/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js
index ac59416fee7..121fb31a2a4 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js
@@ -81,7 +81,10 @@ export default (state = initialState, action) => {
     }
 
     case EDITOR_HOST_SELECT_CLEAR: {
-      return state.set('searchQuery', '').set('isSearchingHosts', false);
+      return state
+        .set('searchQuery', '')
+        .set('isSearchingHosts', false)
+        .set('selectedHost', { id: '', name: '' });
     }
 
     case EDITOR_MODAL_TOGGLE: {
@@ -141,9 +144,7 @@ export default (state = initialState, action) => {
     }
 
     case EDITOR_HOST_SELECT_TOGGLE: {
-      return state
-        .set('isSelectOpen', !state.isSelectOpen)
-        .set('searchQuery', '');
+      return state.set('isSelectOpen', !state.isSelectOpen);
     }
 
     case EDITOR_HOST_SELECT_RESET: {
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js
index bea7ae583c0..c413ad72b44 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js
@@ -1,6 +1,18 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Select } from 'patternfly-react-extensions';
+import {
+  Select,
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  Spinner,
+  Icon,
+} from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
 import { translate as __ } from '../../../common/I18n';
 import './editorhostselect.scss';
 
@@ -20,7 +32,9 @@ class EditorHostSelect extends Component {
   handleClickOutside = event => {
     if (this.selectRef && !this.selectRef.contains(event.target)) {
       const { open, onToggle } = this.props;
-      if (open) onToggle();
+      if (open) {
+        onToggle();
+      }
     }
   };
 
@@ -31,19 +45,140 @@ class EditorHostSelect extends Component {
     }
   };
 
-  render() {
+  handleInputChange = (_event, value) => {
+    const { onSearchChange, selectedItem, onChange } = this.props;
+
+    onSearchChange({ target: { value } });
+
+    if (selectedItem && selectedItem.name && value !== selectedItem.name) {
+      onChange({ id: '', name: '' });
+    }
+  };
+
+  onInputClick = () => {
+    const { open, onToggle } = this.props;
+
+    if (!open) {
+      onToggle();
+    }
+  };
+
+  toggle = toggleRef => {
     const {
-      show,
-      isLoading,
+      open,
+      searchQuery,
+      selectedItem,
+      onToggle,
+      onSearchClear,
+    } = this.props;
+
+    const inputValue = searchQuery || (selectedItem && selectedItem.name) || '';
+
+    return (
+      <MenuToggle
+        ref={toggleRef}
+        variant="typeahead"
+        onClick={onToggle}
+        isExpanded={open}
+        isFullWidth
+      >
+        <TextInputGroup isPlain>
+          <TextInputGroupMain
+            value={inputValue}
+            onClick={this.onInputClick}
+            onChange={this.handleInputChange}
+            onKeyDown={this.onKey}
+            placeholder={__('Select Host...')}
+            aria-label={__('Filter hosts')}
+          />
+
+          <TextInputGroupUtilities
+            {...(!inputValue ? { style: { display: 'none' } } : {})}
+          >
+            <Button
+              variant="plain"
+              onClick={onSearchClear}
+              aria-label="Clear input value"
+              ouiaId="clear-input-value-button"
+            >
+              <Icon aria-hidden>
+                <TimesIcon />
+              </Icon>
+            </Button>
+          </TextInputGroupUtilities>
+        </TextInputGroup>
+      </MenuToggle>
+    );
+  };
+
+  handleSelect = (_event, selection) => {
+    const {
+      options,
       onChange,
+      onToggle,
       onSearchChange,
       onSearchClear,
-      onToggle,
+    } = this.props;
+    const normalizedSelection =
+      selection === undefined || selection === null
+        ? undefined
+        : String(selection);
+    const selectedHost =
+      options.find(option => String(option.id) === normalizedSelection) ||
+      options.find(option => option.name === normalizedSelection);
+
+    if (selectedHost) {
+      onSearchChange({ target: { value: selectedHost.name } });
+      onChange(selectedHost);
+
+      onToggle();
+      onSearchClear();
+    }
+  };
+
+  render() {
+    const {
+      show,
+      isLoading,
       open,
       options,
-      searchQuery,
+      onToggle,
       selectedItem,
     } = this.props;
+
+    const selectedValue =
+      selectedItem &&
+      selectedItem.id !== undefined &&
+      selectedItem.id !== null &&
+      selectedItem.id !== ''
+        ? String(selectedItem.id)
+        : undefined;
+
+    let selectOptions;
+    if (isLoading) {
+      selectOptions = (
+        <SelectOption isDisabled key="loading" value="loading">
+          <Spinner
+            size="md"
+            style={{ marginRight: 'var(--pf-v5-global--spacer--sm)' }}
+          />
+          {__('Loading...')}
+        </SelectOption>
+      );
+    } else if (!options || options.length === 0) {
+      selectOptions = (
+        <SelectOption isDisabled key="no-results" value="no-results">
+          {__('No Results')}
+        </SelectOption>
+      );
+    } else {
+      selectOptions = options.map(option => (
+        <SelectOption key={option.id} value={String(option.id)}>
+          {option.name || option.id}
+        </SelectOption>
+      ));
+    }
+
     return (
       <div
         ref={this.setWrapperRef}
@@ -51,18 +186,22 @@ class EditorHostSelect extends Component {
         className={show ? '' : 'hidden'}
       >
         <Select
-          options={options}
-          placeholder={__('Filter Host...')}
-          open={open}
-          onToggle={onToggle}
-          searchValue={searchQuery}
-          onSearchChange={onSearchChange}
-          onSearchClear={onSearchClear}
-          onKeyDown={this.onKey}
-          onItemClick={onChange}
-          selectedItem={selectedItem}
-          isLoading={isLoading}
-        />
+          id="editor-host-select"
+          aria-label={__('Host selector')}
+          isOpen={open}
+          onSelect={this.handleSelect}
+          onOpenChange={isOpen => {
+            if (!isOpen && open) onToggle();
+          }}
+          shouldFocusFirstItemOnOpen={false}
+          toggle={this.toggle}
+          selected={selectedValue}
+          variant="typeahead"
+          isScrollable
+          ouiaId="editor-host-select"
+        >
+          <SelectList>{selectOptions}</SelectList>
+        </Select>
       </div>
     );
   }
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
index 207a2737b81..31509ee98fc 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
@@ -117,15 +117,16 @@ const EditorNavbar = ({
                 show={selectedView === 'preview'}
                 open={isSelectOpen}
                 selectedItem={selectedHost}
-                placeholder={__('Select Host...')}
                 isLoading={isFetchingHosts}
-                onChange={host =>
-                  previewTemplate({
-                    host,
-                    renderPath: selectedRenderPath,
-                    templateKindId,
-                  })
-                }
+                onChange={host => {
+                  if (host && host.id && host.id !== '' && host.name) {
+                    previewTemplate({
+                      host,
+                      renderPath: selectedRenderPath,
+                      templateKindId,
+                    });
+                  }
+                }}
                 searchQuery={searchQuery}
                 onToggle={onHostSelectToggle}
                 onSearchChange={onHostSearch}
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap
index a1496b4187f..0d433f2a136 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap
@@ -6,39 +6,33 @@ exports[`EditorHostSelect should render renders EditorHostSelect 1`] = `
   id="editor-select-container"
 >
   <Select
-    disabled={false}
-    emptyText="No Results"
-    focusOnMount={true}
-    isLoading={false}
-    isSearchable={true}
-    loadingText="Loading..."
-    onItemClick={[Function]}
-    onKeyDown={[Function]}
-    onSearchChange={[Function]}
-    onSearchClear={[Function]}
-    onToggle={[Function]}
-    open={true}
-    options={
-      Array [
-        Object {
-          "id": "1",
-          "name": "host1",
-        },
-        Object {
-          "id": "2",
-          "name": "host2",
-        },
-      ]
-    }
-    placeholder="Filter Host..."
-    searchValue=""
-    selectedItem={
-      Object {
-        "id": "1",
-        "name": "one",
-      }
-    }
-  />
+    aria-label="Host selector"
+    id="editor-host-select"
+    isOpen={true}
+    isScrollable={true}
+    onOpenChange={[Function]}
+    onSelect={[Function]}
+    ouiaId="editor-host-select"
+    selected="1"
+    shouldFocusFirstItemOnOpen={false}
+    toggle={[Function]}
+    variant="typeahead"
+  >
+    <SelectList>
+      <SelectOption
+        key="1"
+        value="1"
+      >
+        host1
+      </SelectOption>
+      <SelectOption
+        key="2"
+        value="2"
+      >
+        host2
+      </SelectOption>
+    </SelectList>
+  </Select>
 </div>
 `;
 
@@ -48,38 +42,35 @@ exports[`EditorHostSelect should render renders EditorHostSelect loading 1`] = `
   id="editor-select-container"
 >
   <Select
-    disabled={false}
-    emptyText="No Results"
-    focusOnMount={true}
-    isLoading={true}
-    isSearchable={true}
-    loadingText="Loading..."
-    onItemClick={[Function]}
-    onKeyDown={[Function]}
-    onSearchChange={[Function]}
-    onSearchClear={[Function]}
-    onToggle={[Function]}
-    open={true}
-    options={
-      Array [
-        Object {
-          "id": "1",
-          "name": "host1",
-        },
-        Object {
-          "id": "2",
-          "name": "host2",
-        },
-      ]
-    }
-    placeholder="Filter Host..."
-    searchValue=""
-    selectedItem={
-      Object {
-        "id": "1",
-        "name": "one",
-      }
-    }
-  />
+    aria-label="Host selector"
+    id="editor-host-select"
+    isOpen={true}
+    isScrollable={true}
+    onOpenChange={[Function]}
+    onSelect={[Function]}
+    ouiaId="editor-host-select"
+    selected="1"
+    shouldFocusFirstItemOnOpen={false}
+    toggle={[Function]}
+    variant="typeahead"
+  >
+    <SelectList>
+      <SelectOption
+        isDisabled={true}
+        key="loading"
+        value="loading"
+      >
+        <Spinner
+          size="md"
+          style={
+            Object {
+              "marginRight": "var(--pf-v5-global--spacer--sm)",
+            }
+          }
+        />
+        Loading...
+      </SelectOption>
+    </SelectList>
+  </Select>
 </div>
 `;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap
index 8aecab83ca1..e8d322dda43 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap
@@ -56,7 +56,6 @@ exports[`EditorNavbar rendring renders EditorNavbar 1`] = `
           },
         ]
       }
-      placeholder="Select Host..."
       searchQuery=""
       selectedItem={
         Object {