code · pull · Aug 20, 2026 · Aug 20, 2026 · Aug 20, 2026 · Aug 20, 2026
diff --git a/community-modules/styles/src/internal/base/parts/_widgets.scss b/community-modules/styles/src/internal/base/parts/_widgets.scss
@@ -106,6 +106,28 @@
         );
     }
 
+    // the glyph itself comes from the theme's icon font, as `.ag-icon-search`
+    .ag-input-field-search-icon {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        opacity: 0.5;
+        pointer-events: none;
+        inset-inline-start: var(--ag-grid-size);
+    }
+
+    // the `.ag-ltr`/`.ag-rtl` prefix and the input's own class are what lift this above each theme's
+    // `ag.text-input` padding — `.ag-theme-x .ag-ltr input[class^='ag-'][type='text']` in Alpine and
+    // Balham — which is emitted after this file and would otherwise win the cascade
+    .ag-input-field-search input.ag-input-field-input[class^='ag-'][type='text'],
+    .ag-input-field-search input.ag-input-field-input[class^='ag-'][type='number'] {
+        @include ag.unthemed-rtl(
+            (
+                padding-left: calc(var(--ag-icon-size) + var(--ag-grid-size) * 2),
+            )
+        );
+    }
+
     input[class^='ag-'][type='number']:not(.ag-number-field-input-stepper) {
         -moz-appearance: textfield;
         &::-webkit-outer-spin-button,

diff --git a/community-modules/styles/src/internal/themes/quartz/_index.scss b/community-modules/styles/src/internal/themes/quartz/_index.scss
@@ -628,35 +628,6 @@
         opacity: 0.35;
     }
 
-    .ag-input-field-search {
-        .ag-input-wrapper::before {
-            position: absolute;
-            display: block;
-            @include ag.theme-rtl(
-                (
-                    margin-left: var(--ag-grid-size),
-                )
-            );
-            width: 12px;
-            height: 12px;
-            background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBkPSJNNS4zIDlhMy43IDMuNyAwIDEgMCAwLTcuNSAzLjcgMy43IDAgMCAwIDAgNy41Wk0xMC41IDEwLjUgOC4zIDguMiIvPjwvc3ZnPg==');
-            background-position: 50% 50%;
-            background-size: contain;
-            opacity: 40%;
-            content: '';
-            filter: var(--ag-icon-filter);
-        }
-
-        input.ag-text-field-input,
-        input.ag-number-field-input {
-            @include ag.theme-rtl(
-                (
-                    padding-left: 26px,
-                )
-            );
-        }
-    }
-
     .ag-column-select-add-group-indent {
         @include ag.theme-rtl(
             (
@@ -695,13 +666,6 @@
 }
 
 .ag-theme-quartz-dark {
-    .ag-input-field-search {
-        .ag-input-wrapper::before {
-            opacity: 66%;
-            filter: invert(100%);
-        }
-    }
-
     .ag-chart-menu {
         background-color: color-mix(in srgb, rgba(24, 39, 50, 0.3), var(--ag-background-color) 30%);
     }

diff --git a/...tation/ag-grid-docs/src/components/theme-builder-homepage/ThemeBuilderExample.module.scss b/...tation/ag-grid-docs/src/components/theme-builder-homepage/ThemeBuilderExample.module.scss
@@ -110,8 +110,6 @@
 
 .codeBlockWrapper {
     position: relative;
-    // Follow the site-wide code block background so the panel matches every other code block
-    // in the current mode. Shiki colours its tokens for the mode, not for this panel.
     background-color: var(--color-code-background);
     border-radius: 8px;
     padding: 16px;
@@ -136,6 +134,26 @@
         background-color: color-mix(in srgb, var(--color-white), var(--color-bg-primary) 90%);
     }
 
+    // The panel keeps its own dark identity in light mode. Shiki's 'ag-docs' theme emits token
+    // colours as 'var(--color-code-*)', so redefining them here re-themes this panel alone.
+    html:not(#{$selector-darkmode}) & {
+        --color-code-background: #111a4a;
+        --color-fg-primary: rgb(255 255 255 / 90%);
+        --color-code-comment: rgb(255 255 255 / 42%);
+        --color-code-tag: rgb(255 255 255 / 90%);
+        --color-code-keyword: #f472b6;
+        --color-code-class-name: #f472b6;
+        --color-code-string: #7dd3fc;
+        --color-code-symbol: #7dd3fc;
+        --color-code-selector: #7dd3fc;
+        --color-code-function: var(--color-brand-200);
+        --color-code-property: #a2a6ba;
+        --color-code-punctuation: #81869f;
+        --color-code-deleted: #81869f;
+        --color-code-line-number: rgb(255 255 255 / 90%);
+        --color-code-line-number-opacity: 1;
+    }
+
     pre {
         height: 100%;
         margin: 26px 0 16px 0;
@@ -157,8 +175,6 @@
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    // Tints against the panel in either mode: dark dots on the light code background, and the
-    // previous white dots once the foreground colour flips in dark mode.
     background-color: color-mix(in srgb, var(--color-fg-primary) 30%, transparent);
 }
 

diff --git a/documentation/ag-grid-docs/src/content/docs/custom-icons/index.mdoc b/documentation/ag-grid-docs/src/content/docs/custom-icons/index.mdoc
@@ -492,7 +492,7 @@ chartsThemeNext: 'next'
 // download chart
 chartsDownload: 'save'
 
-// icon used in the find toolbar input
+// icon used in the find toolbar input and in filter search inputs
 search: 'search'
 
 // file input overlay

diff --git a/external/ag-website-shared/src/components/code/CodeHighlight.module.scss b/external/ag-website-shared/src/components/code/CodeHighlight.module.scss
@@ -41,11 +41,12 @@
             margin-left: -3.5em;
             margin-right: 1em;
             text-align: right;
-            color: var(--color-util-brand-500);
-            opacity: 0.33;
+            // Overridable by blocks that paint their own palette.
+            color: var(--color-code-line-number, var(--color-util-brand-500));
+            opacity: var(--color-code-line-number-opacity, 0.33);
 
             #{$selector-darkmode} & {
-                color: var(--color-fg-primary);
+                color: var(--color-code-line-number, var(--color-fg-primary));
             }
         }
     }

diff --git a/packages/ag-grid-community/src/agWidgets/agInputTextField.ts b/packages/ag-grid-community/src/agWidgets/agInputTextField.ts
@@ -55,6 +55,7 @@ export class AgInputTextField<
     AgInputTextFieldEvent | TEventType
 > {
     private eClearButton: HTMLButtonElement | undefined;
+    private eSearchIcon: HTMLElement | undefined;
     private clearButtonEnabled: boolean = false;
 
     constructor(config?: TConfig, className = 'ag-text-field', inputType = 'text') {
@@ -113,6 +114,14 @@ export class AgInputTextField<
 
     public setSearchIcon(searchIcon: boolean): this {
         this.toggleCss('ag-input-field-search', searchIcon);
+        if (searchIcon && !this.eSearchIcon) {
+            this.createSearchIcon();
+        }
+        const { eSearchIcon } = this;
+        if (eSearchIcon) {
+            // decorative: it stays aria-hidden whether or not it is displayed
+            _setDisplayed(eSearchIcon, searchIcon, { skipAriaHidden: true });
+        }
         return this;
     }
 
@@ -173,6 +182,22 @@ export class AgInputTextField<
         this.eClearButton = eClearButton;
     }
 
+    private createSearchIcon(): void {
+        const eIcon = this.beans.iconSvc.createIconNoSpan('search');
+        if (!eIcon) {
+            return;
+        }
+        const eSearchIcon = _createAgElement({
+            tag: 'span',
+            cls: 'ag-input-field-search-icon',
+            attrs: { 'aria-hidden': 'true' },
+        });
+        eSearchIcon.appendChild(eIcon);
+        // the search icon leads the input; the clear button trails it
+        this.eWrapper.insertBefore(eSearchIcon, this.eWrapper.firstChild);
+        this.eSearchIcon = eSearchIcon;
+    }
+
     private refreshClearButton(): void {
         const { eClearButton, eInput } = this;
         if (!eClearButton || !eInput) {

diff --git a/packages/ag-grid-community/src/filter/filterMenuFactory.ts b/packages/ag-grid-community/src/filter/filterMenuFactory.ts
@@ -201,14 +201,14 @@ export class FilterMenuFactory extends BeanStub implements NamedBean, IMenuFacto
         if (
             e.key !== KeyCode.TAB ||
             e.defaultPrevented ||
-            _findNextFocusableElement(this.beans, menu, false, e.shiftKey)
+            _findNextFocusableElement({ beans: this.beans, rootNode: menu, onlyUnmanaged: true, backwards: e.shiftKey })
         ) {
             return;
         }
 
         e.preventDefault();
 
-        _focusInto(menu, e.shiftKey);
+        _focusInto(menu, e.shiftKey, true);
     }
 
     private dispatchVisibleChangedEvent(visible: boolean, containerType: ContainerType, column?: AgColumn): void {

diff --git a/packages/ag-grid-community/src/headerRendering/cells/floatingFilter/headerFilterCellCtrl.ts b/packages/ag-grid-community/src/headerRendering/cells/floatingFilter/headerFilterCellCtrl.ts
@@ -156,7 +156,7 @@ export class HeaderFilterCellCtrl extends AbstractHeaderCellCtrl<IHeaderFilterCe
             return;
         }
 
-        const nextFocusableEl = _findNextFocusableElement(beans, this.eGui, null, e.shiftKey);
+        const nextFocusableEl = _findNextFocusableElement({ beans, rootNode: this.eGui, backwards: e.shiftKey });
 
         if (nextFocusableEl) {
             beans.headerNavigation?.scrollToColumn(this.column);

diff --git a/packages/ag-grid-community/src/navigation/navigationService.ts b/packages/ag-grid-community/src/navigation/navigationService.ts
@@ -494,9 +494,15 @@ export class NavigationService extends BeanStub implements NamedBean {
         let res: boolean | null | undefined;
         const cellCtrl = previous instanceof CellCtrl ? previous : previous.getAllCellCtrls()?.[0];
 
-        if (editSvc?.isEditing()) {
+        const wasEditing = editSvc?.isEditing();
+        if (wasEditing) {
             res = editSvc?.moveToNextCell(cellCtrl, backwards, event, source);
-        } else {
+        }
+
+        // if the cell was editing and res is false, it could be because validation blocked the edit
+        // if that is not the case and we are no longer editing, this means the `moveToNextCell` couldn't find
+        // another editable cell, so we switch to `moveToNextCellNotEditing` to find the next cell to focus on.
+        if (!wasEditing || (res === false && !editSvc?.isEditing())) {
             res = this.moveToNextCellNotEditing(previous, backwards);
         }
 

diff --git a/packages/ag-grid-community/src/rendering/overlays/overlayWrapperComponent.ts b/packages/ag-grid-community/src/rendering/overlays/overlayWrapperComponent.ts
@@ -57,7 +57,8 @@ export class OverlayWrapperComponent extends Component implements LayoutView {
 
         const { beans, eOverlayWrapper } = this;
 
-        const nextEl = eOverlayWrapper && _findNextFocusableElement(beans, eOverlayWrapper, false, e.shiftKey);
+        const nextEl =
+            eOverlayWrapper && _findNextFocusableElement({ beans, rootNode: eOverlayWrapper, backwards: e.shiftKey });
         if (nextEl) {
             return;
         }

diff --git a/packages/ag-grid-community/src/rendering/row/fullWidthRowFeature.ts b/packages/ag-grid-community/src/rendering/row/fullWidthRowFeature.ts
@@ -405,7 +405,7 @@ export class FullWidthRowFeature extends BeanStub implements IRowModeFeature {
         if (keyboardEvent.defaultPrevented || _isStopPropagationForAgGrid(keyboardEvent)) {
             return;
         }
-        const { rowCtrl } = this;
+        const { rowCtrl, beans } = this;
         const element = rowCtrl.getCurrentRowElement();
         const currentFullWidthContainer = element?.contains(keyboardEvent.target as HTMLElement) ? element : null;
         const isFullWidthContainerFocused = currentFullWidthContainer === keyboardEvent.target;
@@ -420,7 +420,11 @@ export class FullWidthRowFeature extends BeanStub implements IRowModeFeature {
         let nextEl: HTMLElement | null = null;
 
         if (!isFullWidthContainerFocused && !isDetailGridCellFocused) {
-            nextEl = _findNextFocusableElement(this.beans, currentFullWidthContainer!, false, keyboardEvent.shiftKey);
+            nextEl = _findNextFocusableElement({
+                beans,
+                rootNode: currentFullWidthContainer!,
+                backwards: keyboardEvent.shiftKey,
+            });
         }
 
         if (isFullWidthContainerFocused || !nextEl) {

diff --git a/packages/ag-grid-community/src/theming/parts/input-style/input-style-base.css b/packages/ag-grid-community/src/theming/parts/input-style/input-style-base.css
@@ -71,29 +71,26 @@
     }
 }
 
-/* icon for search inputs */
-:where(.ag-input-field-search) {
-    .ag-input-wrapper::before {
-        position: absolute;
-        display: block;
-        margin-left: var(--ag-spacing);
-        width: 12px;
-        height: 12px;
-        color: var(--ag-input-icon-color);
-        background-color: currentcolor;
+/* icon for search inputs - the glyph itself comes from the active icon set, as `.ag-icon-search` */
+.ag-input-field-search-icon {
+    position: absolute;
+    inset-inline-start: var(--ag-spacing);
+    display: inline-flex;
+    align-items: center;
+    opacity: 0.5;
+    pointer-events: none;
 
-        /* masked background colour, which must be preserved when printing */
-        print-color-adjust: exact;
-        mask-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBkPSJNNS4zIDlhMy43IDMuNyAwIDEgMCAwLTcuNSAzLjcgMy43IDAgMCAwIDAgNy41Wk0xMC41IDEwLjUgOC4zIDguMiIvPjwvc3ZnPg==');
-        mask-position: center;
-        mask-repeat: no-repeat;
-        opacity: 0.5;
-        content: '';
-    }
+    /*
+     * `inputIconColor` must be applied by redefining the icon's own custom property: `.ag-icon` sets
+     * `color: var(--ag-icon-color)` on itself, so an inherited `color` here would never reach the glyph.
+     */
+    --ag-icon-color: var(--ag-input-icon-color);
+}
 
+:where(.ag-input-field-search) {
     .ag-text-field-input,
     .ag-number-field-input {
-        padding-left: calc(var(--ag-spacing) * 1.5 + 12px);
+        padding-inline-start: calc(var(--ag-icon-size) + var(--ag-spacing) * 2);
     }
 }
 

diff --git a/packages/ag-grid-community/src/utils/gridFocus.ts b/packages/ag-grid-community/src/utils/gridFocus.ts
@@ -21,7 +21,7 @@ export function _addFocusableContainerListener(beans: BeanCollection, comp: Comp
             // this generic fallback for the current event.
             if (!e.defaultPrevented && !_shouldSkipFocusableContainerListener(e) && e.key === KeyCode.TAB) {
                 const backwards = e.shiftKey;
-                if (!_findNextFocusableElement(beans, eGui, false, backwards)) {
+                if (!_findNextFocusableElement({ beans, rootNode: eGui, backwards })) {
                     if (_focusNextGridCoreContainer(beans, backwards)) {
                         e.preventDefault();
                     }

diff --git a/packages/ag-grid-enterprise/src/advancedFilter/advancedFilterHeaderComp.ts b/packages/ag-grid-enterprise/src/advancedFilter/advancedFilterHeaderComp.ts
@@ -177,12 +177,11 @@ export class AdvancedFilterHeaderComp extends Component {
                 if (this.hasFocus()) {
                     this.navigateLeftRight(event);
                 } else {
-                    const nextFocusableEl = _findNextFocusableElement(
-                        this.beans,
-                        this.getFocusableElement(),
-                        null,
-                        event.shiftKey
-                    );
+                    const nextFocusableEl = _findNextFocusableElement({
+                        beans: this.beans,
+                        rootNode: this.getFocusableElement(),
+                        backwards: event.shiftKey,
+                    });
                     if (nextFocusableEl) {
                         event.preventDefault();
                         nextFocusableEl.focus();

diff --git a/packages/ag-grid-enterprise/src/agStack/agTabbedLayout.ts b/packages/ag-grid-enterprise/src/agStack/agTabbedLayout.ts
@@ -207,7 +207,7 @@ export class AgTabbedLayout<
         }
 
         if (!nextEl && eBody.contains(activeElement)) {
-            nextEl = _findNextFocusableElement(beans, eBody, false, backwards);
+            nextEl = _findNextFocusableElement({ beans, rootNode: eBody, backwards });
 
             if (!nextEl) {
                 if (suppressTrapFocus && !backwards) {

diff --git a/...grid-enterprise/src/charts/chartComp/menu/advancedSettings/advancedSettingsMenuFactory.ts b/...grid-enterprise/src/charts/chartComp/menu/advancedSettings/advancedSettingsMenuFactory.ts
@@ -81,7 +81,7 @@ class AdvancedSettingsMenu extends TabGuardComp {
 
         const backwards = e.shiftKey;
         const panelGui = this.advancedSettingsPanel.getGui();
-        const nextEl = _findNextFocusableElement(this.beans, panelGui, false, backwards);
+        const nextEl = _findNextFocusableElement({ beans: this.beans, rootNode: panelGui, backwards });
 
         if (nextEl) {
             nextEl.focus();

diff --git a/packages/ag-grid-enterprise/src/menu/columnChooserFactory.ts b/packages/ag-grid-enterprise/src/menu/columnChooserFactory.ts
@@ -100,7 +100,7 @@ export class ColumnChooserFactory extends BeanStub implements NamedBean {
                 centered: true,
                 closable: true,
                 afterGuiAttached: () => {
-                    _findNextFocusableElement(beans, columnSelectPanel.getGui())?.focus({
+                    _findNextFocusableElement({ beans, rootNode: columnSelectPanel.getGui() })?.focus({
                         preventScroll: true,
                     });
                     this.dispatchVisibleChangedEvent(true, column);

diff --git a/packages/ag-grid-enterprise/src/sideBar/agSideBar.ts b/packages/ag-grid-enterprise/src/sideBar/agSideBar.ts
@@ -126,7 +126,7 @@ class AgSideBar extends Component implements ISideBar, FocusableContainer {
         let nextEl: HTMLElement | null = null;
 
         if (openPanel.contains(activeElement)) {
-            nextEl = _findNextFocusableElement(beans, openPanel, undefined, true);
+            nextEl = _findNextFocusableElement({ beans, rootNode: openPanel, backwards: true });
         } else if (isTargetUnderManagedComponent(openPanel, target)) {
             nextEl = findFocusableElementBeforeTabGuard(openPanel, target);
         }

diff --git a/packages/ag-grid-enterprise/src/widgets/AgPillContainer.ts b/packages/ag-grid-enterprise/src/widgets/AgPillContainer.ts
@@ -117,7 +117,7 @@ export class AgPillContainer<TValue> extends Component {
                 activePill.focus();
             }
 
-            const nextFocusableEl = _findNextFocusableElement(beans, eGui, false, isPrevious);
+            const nextFocusableEl = _findNextFocusableElement({ beans, rootNode: eGui, backwards: isPrevious });
 
             if (nextFocusableEl) {
                 nextFocusableEl.focus();