From ec0ca8a9c20aedc5c411a9906a9b5352a023d06a Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Thu, 29 Jan 2026 23:09:42 +0100
Subject: [PATCH 01/11] Ads changeset

---
 .changeset/itchy-frogs-grab.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/itchy-frogs-grab.md

diff --git a/.changeset/itchy-frogs-grab.md b/.changeset/itchy-frogs-grab.md
new file mode 100644
index 00000000000..e1bcbff85eb
--- /dev/null
+++ b/.changeset/itchy-frogs-grab.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Attribute configuration: allow users to filter attribute values by slug or name when there are more than 5 values.

From 423634bd06be955e819c6fbaf1b957650be82875 Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Thu, 29 Jan 2026 23:10:05 +0100
Subject: [PATCH 02/11] Add attribute values filtering

---
 .../AttributePage/AttributePage.tsx           |   2 +-
 .../AttributeValues/AttributeValues.tsx       | 313 +++++++++++++-----
 .../components/AttributeValues/index.ts       |   3 +-
 3 files changed, 224 insertions(+), 94 deletions(-)

diff --git a/src/attributes/components/AttributePage/AttributePage.tsx b/src/attributes/components/AttributePage/AttributePage.tsx
index eb44c5ea004..9e9f3d09c65 100644
--- a/src/attributes/components/AttributePage/AttributePage.tsx
+++ b/src/attributes/components/AttributePage/AttributePage.tsx
@@ -55,7 +55,7 @@ import AttributeDetails from "../AttributeDetails";
 import AttributeOrganization from "../AttributeOrganization";
 import AttributeProperties from "../AttributeProperties";
 import { AttributeReferenceTypesSection } from "../AttributeReferenceTypesSection/AttributeReferenceTypesSection";
-import AttributeValues from "../AttributeValues";
+import { AttributeValues } from "../AttributeValues/AttributeValues";
 
 interface AttributePageProps {
   attribute?: AttributeDetailsQuery["attribute"] | null | undefined;
diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index 9ee129af5ce..10bc862c701 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -15,7 +15,8 @@ import { ListProps, PaginateListProps, RelayToFlat, ReorderAction } from "@dashb
 import { TableCell, TableHead } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import { Box, Button, Skeleton } from "@saleor/macaw-ui-next";
-import { Trash2 } from "lucide-react";
+import { Search, Trash2, X } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 interface AttributeValuesProps
@@ -72,6 +73,94 @@ const getSwatchCellStyle = (value?: AttributeValueFragment | undefined) => {
     ? { backgroundImage: `url(${value.file.url})` }
     : { backgroundColor: value.value ?? undefined };
 };
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+}
+
+const SearchInput = ({ value, onChange, placeholder }: SearchInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      gap={2}
+      paddingX={3}
+      paddingY={2}
+      borderWidth={1}
+      borderStyle="solid"
+      borderColor="default1"
+      borderRadius={3}
+      backgroundColor="default1"
+    >
+      <Box display="flex" alignItems="center" flexShrink="0">
+        <Search size={16} color="var(--mu-colors-text-default2)" />
+      </Box>
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Escape") {
+            onChange("");
+            inputRef.current?.blur();
+          }
+        }}
+        placeholder={placeholder}
+        data-test-id="attribute-value-search-input"
+        style={{
+          flex: 1,
+          border: "none",
+          outline: "none",
+          backgroundColor: "transparent",
+          fontSize: "14px",
+          color: "var(--mu-colors-text-default1)",
+          minWidth: 0,
+        }}
+      />
+      {value && (
+        <Box
+          as="button"
+          type="button"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          padding={0}
+          borderWidth={0}
+          backgroundColor="transparent"
+          cursor="pointer"
+          onClick={() => {
+            onChange("");
+            inputRef.current?.focus();
+          }}
+          data-test-id="attribute-value-search-clear"
+        >
+          <X size={16} color="var(--mu-colors-text-default2)" />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+function filterAttributeValues(
+  values: RelayToFlat<AttributeValueListFragment> | undefined,
+  searchQuery: string,
+): RelayToFlat<AttributeValueListFragment> | undefined {
+  if (!values || !searchQuery.trim()) {
+    return values;
+  }
+
+  const query = searchQuery.toLowerCase().trim();
+
+  return values.filter(
+    value => value.slug?.toLowerCase().includes(query) || value.name?.toLowerCase().includes(query),
+  );
+}
+
 const AttributeValues = ({
   disabled,
   onValueAdd,
@@ -89,6 +178,19 @@ const AttributeValues = ({
   const classes = useStyles({});
   const intl = useIntl();
   const isSwatch = inputType === AttributeInputTypeEnum.SWATCH;
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredValues = useMemo(
+    () => filterAttributeValues(values, searchQuery),
+    [values, searchQuery],
+  );
+
+  const SEARCH_THRESHOLD = 5;
+  const showSearch = values && values.length > SEARCH_THRESHOLD;
+
+  // Only apply filtering when search is visible
+  const displayedValues = showSearch ? filteredValues : values;
+  const hasDisplayedValues = displayedValues && displayedValues.length > 0;
 
   return (
     <DashboardCard data-test-id="attribute-values-section">
@@ -127,99 +229,128 @@ const AttributeValues = ({
             />
           </Placeholder>
         ) : (
-          <ResponsiveTable
-            footer={
-              <TablePagination
-                hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-                onNextPage={onNextPage}
-                hasPreviousPage={pageInfo && !disabled ? pageInfo.hasPreviousPage : false}
-                onPreviousPage={onPreviousPage}
-                settings={settings}
-                onUpdateListSettings={onUpdateListSettings}
+          <Box display="flex" flexDirection="column" gap={4}>
+            {showSearch && (
+              <SearchInput
+                value={searchQuery}
+                onChange={setSearchQuery}
+                placeholder={intl.formatMessage({
+                  id: "9seX5T",
+                  defaultMessage: "Search attribute values...",
+                  description: "attribute values search placeholder",
+                })}
               />
-            }
-          >
-            <TableHead>
-              <TableRowLink>
-                <TableCell className={classes.columnDrag} />
-                {isSwatch && (
-                  <TableCell className={classes.columnSwatch}>
-                    <FormattedMessage
-                      id="NUevU9"
-                      defaultMessage="Swatch"
-                      description="attribute values list: slug column header"
-                    />
-                  </TableCell>
-                )}
-                <TableCell className={classes.columnAdmin}>
-                  <FormattedMessage
-                    id="3psvRS"
-                    defaultMessage="Admin"
-                    description="attribute values list: slug column header"
+            )}
+            {!hasDisplayedValues && searchQuery ? (
+              <Placeholder>
+                <FormattedMessage
+                  id="oegjWf"
+                  defaultMessage="No values match your search"
+                  description="attribute values list: no search results"
+                />
+              </Placeholder>
+            ) : (
+              <ResponsiveTable
+                footer={
+                  <TablePagination
+                    hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
+                    onNextPage={onNextPage}
+                    hasPreviousPage={pageInfo && !disabled ? pageInfo.hasPreviousPage : false}
+                    onPreviousPage={onPreviousPage}
+                    settings={settings}
+                    onUpdateListSettings={onUpdateListSettings}
                   />
-                </TableCell>
-                <TableCell className={classes.columnStore}>
-                  <FormattedMessage
-                    id="H60H6L"
-                    defaultMessage="Default Store View"
-                    description="attribute values list: name column header"
-                  />
-                </TableCell>
-                <TableCell className={classes.iconCell} />
-              </TableRowLink>
-            </TableHead>
-            <SortableTableBody onSortEnd={onValueReorder}>
-              {renderCollection(values, (value, valueIndex) => (
-                <SortableTableRow<"row">
-                  data-test-id="attributes-rows"
-                  className={value ? classes.link : undefined}
-                  hover={!!value}
-                  onClick={value ? () => onValueUpdate(value.id) : undefined}
-                  key={value?.id}
-                  index={valueIndex || 0}
-                >
-                  {isSwatch && (
-                    <TableCell className={classes.columnSwatch}>
-                      {value?.file ? (
-                        <Box
-                          as="img"
-                          objectFit="cover"
-                          alt=""
-                          src={value.file.url}
-                          __width={32}
-                          __height={32}
-                          data-test-id="swatch-image"
-                        />
-                      ) : (
-                        <div
-                          data-test-id="swatch-image"
-                          className={classes.swatch}
-                          style={getSwatchCellStyle(value)}
+                }
+              >
+                <TableHead>
+                  <TableRowLink>
+                    <TableCell className={classes.columnDrag} />
+                    {isSwatch && (
+                      <TableCell className={classes.columnSwatch}>
+                        <FormattedMessage
+                          id="NUevU9"
+                          defaultMessage="Swatch"
+                          description="attribute values list: slug column header"
                         />
-                      )}
+                      </TableCell>
+                    )}
+                    <TableCell className={classes.columnAdmin}>
+                      <FormattedMessage
+                        id="3psvRS"
+                        defaultMessage="Admin"
+                        description="attribute values list: slug column header"
+                      />
                     </TableCell>
-                  )}
-                  <TableCell className={classes.columnAdmin} data-test-id="attribute-value-name">
-                    {value?.slug ?? <Skeleton />}
-                  </TableCell>
-                  <TableCell className={classes.columnStore}>
-                    {value?.name ?? <Skeleton />}
-                  </TableCell>
-                  <TableCell className={classes.iconCell}>
-                    <Button
-                      icon={
-                        <Trash2 size={iconSize.small} strokeWidth={iconStrokeWidthBySize.small} />
-                      }
-                      data-test-id="delete-attribute-value-button"
-                      variant="secondary"
-                      disabled={disabled}
-                      onClick={stopPropagation(() => onValueDelete(value?.id ?? ""))}
-                    />
-                  </TableCell>
-                </SortableTableRow>
-              ))}
-            </SortableTableBody>
-          </ResponsiveTable>
+                    <TableCell className={classes.columnStore}>
+                      <FormattedMessage
+                        id="H60H6L"
+                        defaultMessage="Default Store View"
+                        description="attribute values list: name column header"
+                      />
+                    </TableCell>
+                    <TableCell className={classes.iconCell} />
+                  </TableRowLink>
+                </TableHead>
+                <SortableTableBody onSortEnd={onValueReorder}>
+                  {renderCollection(displayedValues, (value, valueIndex) => (
+                    <SortableTableRow<"row">
+                      data-test-id="attributes-rows"
+                      className={value ? classes.link : undefined}
+                      hover={!!value}
+                      onClick={value ? () => onValueUpdate(value.id) : undefined}
+                      key={value?.id}
+                      index={valueIndex || 0}
+                    >
+                      {isSwatch && (
+                        <TableCell className={classes.columnSwatch}>
+                          {value?.file ? (
+                            <Box
+                              as="img"
+                              objectFit="cover"
+                              alt=""
+                              src={value.file.url}
+                              __width={32}
+                              __height={32}
+                              data-test-id="swatch-image"
+                            />
+                          ) : (
+                            <div
+                              data-test-id="swatch-image"
+                              className={classes.swatch}
+                              style={getSwatchCellStyle(value)}
+                            />
+                          )}
+                        </TableCell>
+                      )}
+                      <TableCell
+                        className={classes.columnAdmin}
+                        data-test-id="attribute-value-name"
+                      >
+                        {value?.slug ?? <Skeleton />}
+                      </TableCell>
+                      <TableCell className={classes.columnStore}>
+                        {value?.name ?? <Skeleton />}
+                      </TableCell>
+                      <TableCell className={classes.iconCell}>
+                        <Button
+                          icon={
+                            <Trash2
+                              size={iconSize.small}
+                              strokeWidth={iconStrokeWidthBySize.small}
+                            />
+                          }
+                          data-test-id="delete-attribute-value-button"
+                          variant="secondary"
+                          disabled={disabled}
+                          onClick={stopPropagation(() => onValueDelete(value?.id ?? ""))}
+                        />
+                      </TableCell>
+                    </SortableTableRow>
+                  ))}
+                </SortableTableBody>
+              </ResponsiveTable>
+            )}
+          </Box>
         )}
       </DashboardCard.Content>
     </DashboardCard>
@@ -227,4 +358,4 @@ const AttributeValues = ({
 };
 
 AttributeValues.displayName = "AttributeValues";
-export default AttributeValues;
+export { AttributeValues };
diff --git a/src/attributes/components/AttributeValues/index.ts b/src/attributes/components/AttributeValues/index.ts
index 02874e27397..e04932a58f5 100644
--- a/src/attributes/components/AttributeValues/index.ts
+++ b/src/attributes/components/AttributeValues/index.ts
@@ -1,2 +1 @@
-export { default } from "./AttributeValues";
-export * from "./AttributeValues";
+export { AttributeValues } from "./AttributeValues";

From 64daac3bc317b302fc6e6327462680509fc6edff Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Thu, 29 Jan 2026 23:34:55 +0100
Subject: [PATCH 03/11] Hook search into server side filtering for attribute
 values

---
 .../AttributePage/AttributePage.tsx           |  6 ++
 .../AttributeValues/AttributeValues.tsx       | 62 ++++++-----------
 src/attributes/queries.ts                     |  4 +-
 .../AttributeDetails/AttributeDetails.tsx     | 69 +++++++++++++++++--
 src/fragments/attributes.ts                   |  8 ++-
 src/graphql/hooks.generated.ts                | 37 +++++-----
 src/graphql/types.generated.ts                | 12 +++-
 src/modeling/mutations.ts                     |  1 +
 src/modeling/queries.ts                       |  2 +
 src/products/queries.ts                       |  4 ++
 10 files changed, 136 insertions(+), 69 deletions(-)

diff --git a/src/attributes/components/AttributePage/AttributePage.tsx b/src/attributes/components/AttributePage/AttributePage.tsx
index 9e9f3d09c65..8fc306be3d0 100644
--- a/src/attributes/components/AttributePage/AttributePage.tsx
+++ b/src/attributes/components/AttributePage/AttributePage.tsx
@@ -80,6 +80,8 @@ interface AttributePageProps {
   };
   onNextPage: () => void;
   onPreviousPage: () => void;
+  searchQuery?: string;
+  onSearchChange?: (query: string) => void;
   children: (data: AttributePageFormData) => React.ReactNode;
 }
 
@@ -119,6 +121,8 @@ const AttributePage = ({
   pageInfo,
   onNextPage,
   onPreviousPage,
+  searchQuery,
+  onSearchChange,
   children,
 }: AttributePageProps) => {
   const intl = useIntl();
@@ -291,6 +295,8 @@ const AttributePage = ({
                       pageInfo={pageInfo}
                       onNextPage={onNextPage}
                       onPreviousPage={onPreviousPage}
+                      searchQuery={searchQuery}
+                      onSearchChange={onSearchChange}
                     />
                   </>
                 )}
diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index 10bc862c701..3244eb66479 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -16,7 +16,7 @@ import { TableCell, TableHead } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import { Box, Button, Skeleton } from "@saleor/macaw-ui-next";
 import { Search, Trash2, X } from "lucide-react";
-import { useMemo, useRef, useState } from "react";
+import { useRef } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 interface AttributeValuesProps
@@ -29,6 +29,8 @@ interface AttributeValuesProps
   onValueReorder: ReorderAction;
   onValueUpdate: (id: string) => void;
   inputType: AttributeInputTypeEnum;
+  searchQuery?: string;
+  onSearchChange?: (query: string) => void;
 }
 
 const useStyles = makeStyles(
@@ -146,21 +148,6 @@ const SearchInput = ({ value, onChange, placeholder }: SearchInputProps) => {
   );
 };
 
-function filterAttributeValues(
-  values: RelayToFlat<AttributeValueListFragment> | undefined,
-  searchQuery: string,
-): RelayToFlat<AttributeValueListFragment> | undefined {
-  if (!values || !searchQuery.trim()) {
-    return values;
-  }
-
-  const query = searchQuery.toLowerCase().trim();
-
-  return values.filter(
-    value => value.slug?.toLowerCase().includes(query) || value.name?.toLowerCase().includes(query),
-  );
-}
-
 const AttributeValues = ({
   disabled,
   onValueAdd,
@@ -174,23 +161,15 @@ const AttributeValues = ({
   onNextPage,
   onPreviousPage,
   inputType,
+  searchQuery = "",
+  onSearchChange,
 }: AttributeValuesProps) => {
   const classes = useStyles({});
   const intl = useIntl();
   const isSwatch = inputType === AttributeInputTypeEnum.SWATCH;
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const filteredValues = useMemo(
-    () => filterAttributeValues(values, searchQuery),
-    [values, searchQuery],
-  );
 
-  const SEARCH_THRESHOLD = 5;
-  const showSearch = values && values.length > SEARCH_THRESHOLD;
-
-  // Only apply filtering when search is visible
-  const displayedValues = showSearch ? filteredValues : values;
-  const hasDisplayedValues = displayedValues && displayedValues.length > 0;
+  // Show search when callback is provided (controlled by parent)
+  const showSearch = Boolean(onSearchChange);
 
   return (
     <DashboardCard data-test-id="attribute-values-section">
@@ -220,20 +199,13 @@ const AttributeValues = ({
       <DashboardCard.Content>
         {values === undefined ? (
           <Skeleton />
-        ) : values.length === 0 ? (
-          <Placeholder>
-            <FormattedMessage
-              id="dAst+b"
-              defaultMessage="No values found"
-              description="attribute values list: no attribute values found"
-            />
-          </Placeholder>
         ) : (
           <Box display="flex" flexDirection="column" gap={4}>
-            {showSearch && (
+            {/* Search input - always visible when search is enabled */}
+            {showSearch && onSearchChange && (
               <SearchInput
                 value={searchQuery}
-                onChange={setSearchQuery}
+                onChange={onSearchChange}
                 placeholder={intl.formatMessage({
                   id: "9seX5T",
                   defaultMessage: "Search attribute values...",
@@ -241,7 +213,17 @@ const AttributeValues = ({
                 })}
               />
             )}
-            {!hasDisplayedValues && searchQuery ? (
+            {/* No values at all (not searching) */}
+            {values.length === 0 && !searchQuery ? (
+              <Placeholder>
+                <FormattedMessage
+                  id="dAst+b"
+                  defaultMessage="No values found"
+                  description="attribute values list: no attribute values found"
+                />
+              </Placeholder>
+            ) : /* Search returned no results */
+            values.length === 0 && searchQuery ? (
               <Placeholder>
                 <FormattedMessage
                   id="oegjWf"
@@ -292,7 +274,7 @@ const AttributeValues = ({
                   </TableRowLink>
                 </TableHead>
                 <SortableTableBody onSortEnd={onValueReorder}>
-                  {renderCollection(displayedValues, (value, valueIndex) => (
+                  {renderCollection(values, (value, valueIndex) => (
                     <SortableTableRow<"row">
                       data-test-id="attributes-rows"
                       className={value ? classes.link : undefined}
diff --git a/src/attributes/queries.ts b/src/attributes/queries.ts
index f88a07344de..0e033846505 100644
--- a/src/attributes/queries.ts
+++ b/src/attributes/queries.ts
@@ -7,13 +7,11 @@ export const attributeDetails = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
+    $searchValues: String
   ) {
     attribute(id: $id) {
       ...AttributeDetails
       ...Metadata
-      choices(first: $firstValues, after: $afterValues, last: $lastValues, before: $beforeValues) {
-        ...AttributeValueList
-      }
     }
   }
 `;
diff --git a/src/attributes/views/AttributeDetails/AttributeDetails.tsx b/src/attributes/views/AttributeDetails/AttributeDetails.tsx
index fda945b345e..1afa3a00024 100644
--- a/src/attributes/views/AttributeDetails/AttributeDetails.tsx
+++ b/src/attributes/views/AttributeDetails/AttributeDetails.tsx
@@ -21,6 +21,7 @@ import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHa
 import createMetadataUpdateHandler from "@dashboard/utils/handlers/metadataUpdateHandler";
 import { move } from "@dashboard/utils/lists";
 import omit from "lodash/omit";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 
 import AttributeDeleteDialog from "../../components/AttributeDeleteDialog";
@@ -53,16 +54,74 @@ const AttributeDetails = ({ id, params }: AttributeDetailsProps) => {
   const [valuesPaginationState, setValuesPaginationState] = useLocalPaginationState(
     settings?.rowNumber,
   );
-  const { data, loading } = useAttributeDetailsQuery({
+
+  // Separate state for input value (immediate) and API query (debounced)
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("");
+  const debounceTimerRef = useRef<number | null>(null);
+  const previousSearchRef = useRef<string>("");
+
+  const handleSearchChange = useCallback((query: string) => {
+    setSearchQuery(query);
+
+    // Debounce the API call
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = window.setTimeout(() => {
+      setDebouncedSearchQuery(query);
+    }, 300);
+  }, []);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  // Reset pagination only when debounced search actually changes (skip initial mount)
+  useEffect(() => {
+    if (previousSearchRef.current !== debouncedSearchQuery) {
+      // Only reset if the search value actually changed (not on initial mount with empty string)
+      if (previousSearchRef.current !== "" || debouncedSearchQuery !== "") {
+        setValuesPaginationState({
+          first: settings?.rowNumber,
+          after: undefined,
+          last: undefined,
+          before: undefined,
+        });
+      }
+
+      previousSearchRef.current = debouncedSearchQuery;
+    }
+  }, [debouncedSearchQuery, settings?.rowNumber, setValuesPaginationState]);
+
+  const {
+    data: currentData,
+    previousData,
+    loading,
+  } = useAttributeDetailsQuery({
     variables: {
       id,
       firstValues: valuesPaginationState.first,
       lastValues: valuesPaginationState.last,
       afterValues: valuesPaginationState.after,
       beforeValues: valuesPaginationState.before,
+      searchValues: debouncedSearchQuery || undefined,
     },
     skip: !settings,
   });
+
+  // Use previous data while loading to prevent UI flicker during search/pagination
+  const data = currentData ?? previousData;
+
+  // Only show as "loading" for initial load, not for search refetches
+  const isInitialLoading = loading && !data;
+
   const paginateValues = useLocalPaginator(setValuesPaginationState);
   const { loadNextPage, loadPreviousPage, pageInfo } = paginateValues(
     data?.attribute?.choices?.pageInfo,
@@ -203,7 +262,7 @@ const AttributeDetails = ({ id, params }: AttributeDetailsProps) => {
   return (
     <AttributePage
       attribute={data?.attribute}
-      disabled={loading}
+      disabled={isInitialLoading}
       errors={attributeUpdateOpts.data?.attributeUpdate?.errors || []}
       params={params}
       onDelete={() => openModal("remove")}
@@ -229,6 +288,8 @@ const AttributeDetails = ({ id, params }: AttributeDetailsProps) => {
       pageInfo={pageInfo ?? { hasNextPage: false, hasPreviousPage: false }}
       onNextPage={loadNextPage}
       onPreviousPage={loadPreviousPage}
+      searchQuery={searchQuery}
+      onSearchChange={handleSearchChange}
     >
       {attributeFormData => (
         <>
@@ -271,7 +332,7 @@ const AttributeDetails = ({ id, params }: AttributeDetailsProps) => {
             inputType={attributeFormData.inputType}
             attributeValue={null}
             confirmButtonState={attributeValueCreateOpts.status}
-            disabled={loading}
+            disabled={isInitialLoading}
             errors={attributeValueCreateOpts.data?.attributeValueCreate?.errors || []}
             open={params.action === "add-value"}
             onClose={closeModal}
@@ -295,7 +356,7 @@ const AttributeDetails = ({ id, params }: AttributeDetailsProps) => {
                 null,
             )}
             confirmButtonState={attributeValueUpdateOpts.status}
-            disabled={loading}
+            disabled={isInitialLoading}
             errors={attributeValueUpdateOpts.data?.attributeValueUpdate?.errors || []}
             open={params.action === "edit-value"}
             onClose={closeModal}
diff --git a/src/fragments/attributes.ts b/src/fragments/attributes.ts
index 8ce1a1fbfa4..5fe32cd1b13 100644
--- a/src/fragments/attributes.ts
+++ b/src/fragments/attributes.ts
@@ -56,7 +56,13 @@ export const attributeDetailsFragment = gql`
         name
       }
     }
-    choices(first: $firstValues, after: $afterValues, last: $lastValues, before: $beforeValues) {
+    choices(
+      first: $firstValues
+      after: $afterValues
+      last: $lastValues
+      before: $beforeValues
+      search: $searchValues
+    ) {
       ...AttributeValueList
     }
   }
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index d46b9099127..5ad6d0a7864 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -2519,6 +2519,7 @@ export const AttributeDetailsFragmentDoc = gql`
     after: $afterValues
     last: $lastValues
     before: $beforeValues
+    search: $searchValues
   ) {
     ...AttributeValueList
   }
@@ -4082,23 +4083,14 @@ export type AttributeValueReorderMutationHookResult = ReturnType<typeof useAttri
 export type AttributeValueReorderMutationResult = Apollo.MutationResult<Types.AttributeValueReorderMutation>;
 export type AttributeValueReorderMutationOptions = Apollo.BaseMutationOptions<Types.AttributeValueReorderMutation, Types.AttributeValueReorderMutationVariables>;
 export const AttributeDetailsDocument = gql`
-    query AttributeDetails($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
+    query AttributeDetails($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
   attribute(id: $id) {
     ...AttributeDetails
     ...Metadata
-    choices(
-      first: $firstValues
-      after: $afterValues
-      last: $lastValues
-      before: $beforeValues
-    ) {
-      ...AttributeValueList
-    }
   }
 }
     ${AttributeDetailsFragmentDoc}
-${MetadataFragmentDoc}
-${AttributeValueListFragmentDoc}`;
+${MetadataFragmentDoc}`;
 
 /**
  * __useAttributeDetailsQuery__
@@ -4117,6 +4109,7 @@ ${AttributeValueListFragmentDoc}`;
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
+ *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
@@ -10945,7 +10938,6 @@ export const PageTypeListDocument = gql`
     pageInfo {
       ...PageInfo
     }
-    totalCount
   }
 }
     ${PageTypeFragmentDoc}
@@ -11057,7 +11049,7 @@ export type PageCreateMutationHookResult = ReturnType<typeof usePageCreateMutati
 export type PageCreateMutationResult = Apollo.MutationResult<Types.PageCreateMutation>;
 export type PageCreateMutationOptions = Apollo.BaseMutationOptions<Types.PageCreateMutation, Types.PageCreateMutationVariables>;
 export const PageUpdateDocument = gql`
-    mutation PageUpdate($id: ID!, $input: PageInput!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
+    mutation PageUpdate($id: ID!, $input: PageInput!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
   pageUpdate(id: $id, input: $input) {
     errors {
       ...PageErrorWithAttributes
@@ -11090,6 +11082,7 @@ export type PageUpdateMutationFn = Apollo.MutationFunction<Types.PageUpdateMutat
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
+ *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
@@ -11264,7 +11257,7 @@ export type PageListQueryHookResult = ReturnType<typeof usePageListQuery>;
 export type PageListLazyQueryHookResult = ReturnType<typeof usePageListLazyQuery>;
 export type PageListQueryResult = Apollo.QueryResult<Types.PageListQuery, Types.PageListQueryVariables>;
 export const PageDetailsDocument = gql`
-    query PageDetails($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
+    query PageDetails($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
   page(id: $id) {
     ...PageDetails
   }
@@ -11288,6 +11281,7 @@ export const PageDetailsDocument = gql`
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
+ *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
@@ -11303,7 +11297,7 @@ export type PageDetailsQueryHookResult = ReturnType<typeof usePageDetailsQuery>;
 export type PageDetailsLazyQueryHookResult = ReturnType<typeof usePageDetailsLazyQuery>;
 export type PageDetailsQueryResult = Apollo.QueryResult<Types.PageDetailsQuery, Types.PageDetailsQueryVariables>;
 export const PageTypeDocument = gql`
-    query PageType($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
+    query PageType($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
   pageType(id: $id) {
     id
     name
@@ -11331,6 +11325,7 @@ export const PageTypeDocument = gql`
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
+ *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
@@ -15669,7 +15664,7 @@ export type ProductCountQueryHookResult = ReturnType<typeof useProductCountQuery
 export type ProductCountLazyQueryHookResult = ReturnType<typeof useProductCountLazyQuery>;
 export type ProductCountQueryResult = Apollo.QueryResult<Types.ProductCountQuery, Types.ProductCountQueryVariables>;
 export const ProductDetailsDocument = gql`
-    query ProductDetails($id: ID!, $channel: String, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
+    query ProductDetails($id: ID!, $channel: String, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
   product(id: $id, channel: $channel) {
     ...Product
     category {
@@ -15698,6 +15693,7 @@ ${CategoryWithAncestorsFragmentDoc}`;
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
+ *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
@@ -15713,7 +15709,7 @@ export type ProductDetailsQueryHookResult = ReturnType<typeof useProductDetailsQ
 export type ProductDetailsLazyQueryHookResult = ReturnType<typeof useProductDetailsLazyQuery>;
 export type ProductDetailsQueryResult = Apollo.QueryResult<Types.ProductDetailsQuery, Types.ProductDetailsQueryVariables>;
 export const ProductTypeDocument = gql`
-    query ProductType($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
+    query ProductType($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
   productType(id: $id) {
     id
     name
@@ -15746,6 +15742,7 @@ export const ProductTypeDocument = gql`
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
+ *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
@@ -15761,7 +15758,7 @@ export type ProductTypeQueryHookResult = ReturnType<typeof useProductTypeQuery>;
 export type ProductTypeLazyQueryHookResult = ReturnType<typeof useProductTypeLazyQuery>;
 export type ProductTypeQueryResult = Apollo.QueryResult<Types.ProductTypeQuery, Types.ProductTypeQueryVariables>;
 export const ProductVariantDetailsDocument = gql`
-    query ProductVariantDetails($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
+    query ProductVariantDetails($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
   productVariant(id: $id) {
     ...ProductVariant
   }
@@ -15785,6 +15782,7 @@ export const ProductVariantDetailsDocument = gql`
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
+ *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
@@ -15800,7 +15798,7 @@ export type ProductVariantDetailsQueryHookResult = ReturnType<typeof useProductV
 export type ProductVariantDetailsLazyQueryHookResult = ReturnType<typeof useProductVariantDetailsLazyQuery>;
 export type ProductVariantDetailsQueryResult = Apollo.QueryResult<Types.ProductVariantDetailsQuery, Types.ProductVariantDetailsQueryVariables>;
 export const ProductVariantCreateDataDocument = gql`
-    query ProductVariantCreateData($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
+    query ProductVariantCreateData($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
   product(id: $id) {
     id
     media {
@@ -15870,6 +15868,7 @@ export const ProductVariantCreateDataDocument = gql`
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
+ *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
index b789b88f2cc..c30d118b503 100644
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@@ -8955,10 +8955,11 @@ export type AttributeDetailsQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
+  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
-export type AttributeDetailsQuery = { __typename: 'Query', attribute: { __typename: 'Attribute', availableInGrid: boolean, entityType: AttributeEntityTypeEnum | null, storefrontSearchPosition: number, valueRequired: boolean, id: string, name: string | null, slug: string | null, type: AttributeTypeEnum | null, visibleInStorefront: boolean, filterableInDashboard: boolean, filterableInStorefront: boolean, unit: MeasurementUnitsEnum | null, inputType: AttributeInputTypeEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: string | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null, referenceTypes: Array<{ __typename: 'PageType', id: string, name: string } | { __typename: 'ProductType', id: string, name: string }> | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null };
+export type AttributeDetailsQuery = { __typename: 'Query', attribute: { __typename: 'Attribute', availableInGrid: boolean, entityType: AttributeEntityTypeEnum | null, storefrontSearchPosition: number, valueRequired: boolean, id: string, name: string | null, slug: string | null, type: AttributeTypeEnum | null, visibleInStorefront: boolean, filterableInDashboard: boolean, filterableInStorefront: boolean, unit: MeasurementUnitsEnum | null, inputType: AttributeInputTypeEnum | null, referenceTypes: Array<{ __typename: 'PageType', id: string, name: string } | { __typename: 'ProductType', id: string, name: string }> | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: string | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }> } | null };
 
 export type AttributeListQueryVariables = Exact<{
   filter?: InputMaybe<AttributeFilterInput>;
@@ -10791,7 +10792,7 @@ export type PageTypeListQueryVariables = Exact<{
 }>;
 
 
-export type PageTypeListQuery = { __typename: 'Query', pageTypes: { __typename: 'PageTypeCountableConnection', totalCount: number | null, edges: Array<{ __typename: 'PageTypeCountableEdge', node: { __typename: 'PageType', id: string, name: string, hasPages: boolean | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null };
+export type PageTypeListQuery = { __typename: 'Query', pageTypes: { __typename: 'PageTypeCountableConnection', edges: Array<{ __typename: 'PageTypeCountableEdge', node: { __typename: 'PageType', id: string, name: string, hasPages: boolean | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null };
 
 export type PageTypeDetailsQueryVariables = Exact<{
   id: Scalars['ID'];
@@ -10814,6 +10815,7 @@ export type PageUpdateMutationVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
+  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
@@ -10859,6 +10861,7 @@ export type PageDetailsQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
+  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
@@ -10870,6 +10873,7 @@ export type PageTypeQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
+  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
@@ -11691,6 +11695,7 @@ export type ProductDetailsQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
+  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
@@ -11702,6 +11707,7 @@ export type ProductTypeQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
+  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
@@ -11713,6 +11719,7 @@ export type ProductVariantDetailsQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
+  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
@@ -11724,6 +11731,7 @@ export type ProductVariantCreateDataQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
+  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
diff --git a/src/modeling/mutations.ts b/src/modeling/mutations.ts
index ff0990af61d..824b7e69954 100644
--- a/src/modeling/mutations.ts
+++ b/src/modeling/mutations.ts
@@ -21,6 +21,7 @@ export const pageUpdate = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
+    $searchValues: String
   ) {
     pageUpdate(id: $id, input: $input) {
       errors {
diff --git a/src/modeling/queries.ts b/src/modeling/queries.ts
index d3d3a3a7971..13d0e7f5fb5 100644
--- a/src/modeling/queries.ts
+++ b/src/modeling/queries.ts
@@ -39,6 +39,7 @@ export const pageDetails = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
+    $searchValues: String
   ) {
     page(id: $id) {
       ...PageDetails
@@ -53,6 +54,7 @@ export const pageTypeQuery = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
+    $searchValues: String
   ) {
     pageType(id: $id) {
       id
diff --git a/src/products/queries.ts b/src/products/queries.ts
index 4e43f60a1ce..fa82a73058e 100644
--- a/src/products/queries.ts
+++ b/src/products/queries.ts
@@ -63,6 +63,7 @@ export const productDetailsQuery = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
+    $searchValues: String
   ) {
     product(id: $id, channel: $channel) {
       ...Product
@@ -80,6 +81,7 @@ export const productTypeQuery = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
+    $searchValues: String
   ) {
     productType(id: $id) {
       id
@@ -102,6 +104,7 @@ export const productVariantQuery = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
+    $searchValues: String
   ) {
     productVariant(id: $id) {
       ...ProductVariant
@@ -116,6 +119,7 @@ export const productVariantCreateQuery = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
+    $searchValues: String
   ) {
     product(id: $id) {
       id

From 80ccc7f44cfe807099ba4ddfac4ac28d8c03babe Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Thu, 29 Jan 2026 23:45:29 +0100
Subject: [PATCH 04/11] Refactor Attribute values search

---
 .../AttributeValues/AttributeValues.tsx       |  77 +----------
 .../hooks/useAttributeValuesSearch.test.ts    | 122 ++++++++++++++++++
 .../hooks/useAttributeValuesSearch.ts         |  56 ++++++++
 .../AttributeDetails/AttributeDetails.tsx     |  57 ++------
 .../SearchInput/SearchInput.module.css        |  13 ++
 .../SearchInput/SearchInput.test.tsx          |  95 ++++++++++++++
 src/components/SearchInput/SearchInput.tsx    |  75 +++++++++++
 7 files changed, 377 insertions(+), 118 deletions(-)
 create mode 100644 src/attributes/hooks/useAttributeValuesSearch.test.ts
 create mode 100644 src/attributes/hooks/useAttributeValuesSearch.ts
 create mode 100644 src/components/SearchInput/SearchInput.module.css
 create mode 100644 src/components/SearchInput/SearchInput.test.tsx
 create mode 100644 src/components/SearchInput/SearchInput.tsx

diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index 3244eb66479..3b530b1bf95 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -2,6 +2,7 @@ import { DashboardCard } from "@dashboard/components/Card";
 import { iconSize, iconStrokeWidthBySize } from "@dashboard/components/icons";
 import { Placeholder } from "@dashboard/components/Placeholder";
 import { ResponsiveTable } from "@dashboard/components/ResponsiveTable";
+import { SearchInput } from "@dashboard/components/SearchInput/SearchInput";
 import { SortableTableBody, SortableTableRow } from "@dashboard/components/SortableTable";
 import { TablePagination } from "@dashboard/components/TablePagination";
 import TableRowLink from "@dashboard/components/TableRowLink";
@@ -15,8 +16,7 @@ import { ListProps, PaginateListProps, RelayToFlat, ReorderAction } from "@dashb
 import { TableCell, TableHead } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import { Box, Button, Skeleton } from "@saleor/macaw-ui-next";
-import { Search, Trash2, X } from "lucide-react";
-import { useRef } from "react";
+import { Trash2 } from "lucide-react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 interface AttributeValuesProps
@@ -76,78 +76,6 @@ const getSwatchCellStyle = (value?: AttributeValueFragment | undefined) => {
     : { backgroundColor: value.value ?? undefined };
 };
 
-interface SearchInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder: string;
-}
-
-const SearchInput = ({ value, onChange, placeholder }: SearchInputProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      gap={2}
-      paddingX={3}
-      paddingY={2}
-      borderWidth={1}
-      borderStyle="solid"
-      borderColor="default1"
-      borderRadius={3}
-      backgroundColor="default1"
-    >
-      <Box display="flex" alignItems="center" flexShrink="0">
-        <Search size={16} color="var(--mu-colors-text-default2)" />
-      </Box>
-      <input
-        ref={inputRef}
-        type="text"
-        value={value}
-        onChange={e => onChange(e.target.value)}
-        onKeyDown={e => {
-          if (e.key === "Escape") {
-            onChange("");
-            inputRef.current?.blur();
-          }
-        }}
-        placeholder={placeholder}
-        data-test-id="attribute-value-search-input"
-        style={{
-          flex: 1,
-          border: "none",
-          outline: "none",
-          backgroundColor: "transparent",
-          fontSize: "14px",
-          color: "var(--mu-colors-text-default1)",
-          minWidth: 0,
-        }}
-      />
-      {value && (
-        <Box
-          as="button"
-          type="button"
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          padding={0}
-          borderWidth={0}
-          backgroundColor="transparent"
-          cursor="pointer"
-          onClick={() => {
-            onChange("");
-            inputRef.current?.focus();
-          }}
-          data-test-id="attribute-value-search-clear"
-        >
-          <X size={16} color="var(--mu-colors-text-default2)" />
-        </Box>
-      )}
-    </Box>
-  );
-};
-
 const AttributeValues = ({
   disabled,
   onValueAdd,
@@ -211,6 +139,7 @@ const AttributeValues = ({
                   defaultMessage: "Search attribute values...",
                   description: "attribute values search placeholder",
                 })}
+                data-test-id="attribute-value-search-input"
               />
             )}
             {/* No values at all (not searching) */}
diff --git a/src/attributes/hooks/useAttributeValuesSearch.test.ts b/src/attributes/hooks/useAttributeValuesSearch.test.ts
new file mode 100644
index 00000000000..b49b354b639
--- /dev/null
+++ b/src/attributes/hooks/useAttributeValuesSearch.test.ts
@@ -0,0 +1,122 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+
+import { useAttributeValuesSearch } from "./useAttributeValuesSearch";
+
+describe("useAttributeValuesSearch", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("should return empty search query initially", () => {
+    // Arrange
+    const onResetPagination = jest.fn();
+
+    // Act
+    const { result } = renderHook(() => useAttributeValuesSearch({ onResetPagination }));
+
+    // Assert
+    expect(result.current.searchQuery).toBe("");
+    expect(result.current.debouncedSearchQuery).toBe("");
+  });
+
+  it("should update searchQuery immediately on change", () => {
+    // Arrange
+    const onResetPagination = jest.fn();
+    const { result } = renderHook(() => useAttributeValuesSearch({ onResetPagination }));
+
+    // Act
+    act(() => {
+      result.current.handleSearchChange("test");
+    });
+
+    // Assert
+    expect(result.current.searchQuery).toBe("test");
+    expect(result.current.debouncedSearchQuery).toBe(""); // not yet debounced
+  });
+
+  it("should update debouncedSearchQuery after debounce delay", () => {
+    // Arrange
+    const onResetPagination = jest.fn();
+    const { result } = renderHook(() => useAttributeValuesSearch({ onResetPagination }));
+
+    // Act
+    act(() => {
+      result.current.handleSearchChange("test");
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    // Assert
+    expect(result.current.debouncedSearchQuery).toBe("test");
+  });
+
+  it("should call onResetPagination when debouncedSearchQuery changes", () => {
+    // Arrange
+    const onResetPagination = jest.fn();
+    const { result } = renderHook(() => useAttributeValuesSearch({ onResetPagination }));
+
+    // Act
+    act(() => {
+      result.current.handleSearchChange("test");
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    // Assert
+    expect(onResetPagination).toHaveBeenCalledTimes(1);
+  });
+
+  it("should NOT call onResetPagination on initial mount", () => {
+    // Arrange
+    const onResetPagination = jest.fn();
+
+    // Act
+    renderHook(() => useAttributeValuesSearch({ onResetPagination }));
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    // Assert
+    expect(onResetPagination).not.toHaveBeenCalled();
+  });
+
+  it("should debounce rapid changes and only trigger once", () => {
+    // Arrange
+    const onResetPagination = jest.fn();
+    const { result } = renderHook(() => useAttributeValuesSearch({ onResetPagination }));
+
+    // Act - rapid typing
+    act(() => {
+      result.current.handleSearchChange("t");
+    });
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+    act(() => {
+      result.current.handleSearchChange("te");
+    });
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+    act(() => {
+      result.current.handleSearchChange("test");
+    });
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    // Assert - should only have final value, pagination reset once
+    expect(result.current.searchQuery).toBe("test");
+    expect(result.current.debouncedSearchQuery).toBe("test");
+    expect(onResetPagination).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/attributes/hooks/useAttributeValuesSearch.ts b/src/attributes/hooks/useAttributeValuesSearch.ts
new file mode 100644
index 00000000000..03c95a3864d
--- /dev/null
+++ b/src/attributes/hooks/useAttributeValuesSearch.ts
@@ -0,0 +1,56 @@
+import useDebounce from "@dashboard/hooks/useDebounce";
+import { useEffect, useRef, useState } from "react";
+
+const SEARCH_DEBOUNCE_MS = 300;
+
+interface UseAttributeValuesSearchProps {
+  onResetPagination: () => void;
+}
+
+interface UseAttributeValuesSearchResult {
+  /** Current search input value (updates immediately) */
+  searchQuery: string;
+  /** Debounced search value (for API queries) */
+  debouncedSearchQuery: string;
+  /** Handler for search input changes */
+  handleSearchChange: (query: string) => void;
+}
+
+/**
+ * Hook for managing attribute values search with debouncing.
+ * Handles the search input state, debouncing, and pagination reset on search change.
+ */
+export function useAttributeValuesSearch({
+  onResetPagination,
+}: UseAttributeValuesSearchProps): UseAttributeValuesSearchResult {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("");
+  const previousSearchRef = useRef("");
+
+  // Debounce the search query update
+  const updateDebouncedQuery = useDebounce((query: string) => {
+    setDebouncedSearchQuery(query);
+  }, SEARCH_DEBOUNCE_MS);
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    updateDebouncedQuery(query);
+  };
+
+  // Reset pagination when debounced search changes (but not on initial mount)
+  useEffect(() => {
+    const isInitialMount = previousSearchRef.current === "" && debouncedSearchQuery === "";
+
+    if (!isInitialMount && previousSearchRef.current !== debouncedSearchQuery) {
+      onResetPagination();
+    }
+
+    previousSearchRef.current = debouncedSearchQuery;
+  }, [debouncedSearchQuery, onResetPagination]);
+
+  return {
+    searchQuery,
+    debouncedSearchQuery,
+    handleSearchChange,
+  };
+}
diff --git a/src/attributes/views/AttributeDetails/AttributeDetails.tsx b/src/attributes/views/AttributeDetails/AttributeDetails.tsx
index 1afa3a00024..94218f36737 100644
--- a/src/attributes/views/AttributeDetails/AttributeDetails.tsx
+++ b/src/attributes/views/AttributeDetails/AttributeDetails.tsx
@@ -1,3 +1,4 @@
+import { useAttributeValuesSearch } from "@dashboard/attributes/hooks/useAttributeValuesSearch";
 import { attributeValueFragmentToFormData } from "@dashboard/attributes/utils/data";
 import {
   useAttributeDeleteMutation,
@@ -21,7 +22,7 @@ import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHa
 import createMetadataUpdateHandler from "@dashboard/utils/handlers/metadataUpdateHandler";
 import { move } from "@dashboard/utils/lists";
 import omit from "lodash/omit";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback } from "react";
 import { useIntl } from "react-intl";
 
 import AttributeDeleteDialog from "../../components/AttributeDeleteDialog";
@@ -55,50 +56,18 @@ const AttributeDetails = ({ id, params }: AttributeDetailsProps) => {
     settings?.rowNumber,
   );
 
-  // Separate state for input value (immediate) and API query (debounced)
-  const [searchQuery, setSearchQuery] = useState("");
-  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("");
-  const debounceTimerRef = useRef<number | null>(null);
-  const previousSearchRef = useRef<string>("");
-
-  const handleSearchChange = useCallback((query: string) => {
-    setSearchQuery(query);
-
-    // Debounce the API call
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-
-    debounceTimerRef.current = window.setTimeout(() => {
-      setDebouncedSearchQuery(query);
-    }, 300);
-  }, []);
-
-  // Cleanup debounce timer on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-    };
-  }, []);
-
-  // Reset pagination only when debounced search actually changes (skip initial mount)
-  useEffect(() => {
-    if (previousSearchRef.current !== debouncedSearchQuery) {
-      // Only reset if the search value actually changed (not on initial mount with empty string)
-      if (previousSearchRef.current !== "" || debouncedSearchQuery !== "") {
-        setValuesPaginationState({
-          first: settings?.rowNumber,
-          after: undefined,
-          last: undefined,
-          before: undefined,
-        });
-      }
+  const resetPagination = useCallback(() => {
+    setValuesPaginationState({
+      first: settings?.rowNumber,
+      after: undefined,
+      last: undefined,
+      before: undefined,
+    });
+  }, [settings?.rowNumber, setValuesPaginationState]);
 
-      previousSearchRef.current = debouncedSearchQuery;
-    }
-  }, [debouncedSearchQuery, settings?.rowNumber, setValuesPaginationState]);
+  const { searchQuery, debouncedSearchQuery, handleSearchChange } = useAttributeValuesSearch({
+    onResetPagination: resetPagination,
+  });
 
   const {
     data: currentData,
diff --git a/src/components/SearchInput/SearchInput.module.css b/src/components/SearchInput/SearchInput.module.css
new file mode 100644
index 00000000000..4250643b735
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.module.css
@@ -0,0 +1,13 @@
+.input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  font-size: 14px;
+  color: var(--mu-colors-text-default1);
+  min-width: 0;
+}
+
+.input::placeholder {
+  color: var(--mu-colors-text-default2);
+}
diff --git a/src/components/SearchInput/SearchInput.test.tsx b/src/components/SearchInput/SearchInput.test.tsx
new file mode 100644
index 00000000000..9a77dbf9c62
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.test.tsx
@@ -0,0 +1,95 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SearchInput } from "./SearchInput";
+
+describe("SearchInput", () => {
+  it("should render with placeholder", () => {
+    // Arrange & Act
+    render(<SearchInput value="" onChange={jest.fn()} placeholder="Search..." />);
+
+    // Assert
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+  });
+
+  it("should display the current value", () => {
+    // Arrange & Act
+    render(<SearchInput value="test query" onChange={jest.fn()} placeholder="Search..." />);
+
+    // Assert
+    expect(screen.getByDisplayValue("test query")).toBeInTheDocument();
+  });
+
+  it("should call onChange when typing", async () => {
+    // Arrange
+    const onChange = jest.fn();
+
+    render(<SearchInput value="" onChange={onChange} placeholder="Search..." />);
+
+    // Act
+    await userEvent.type(screen.getByPlaceholderText("Search..."), "a");
+
+    // Assert
+    expect(onChange).toHaveBeenCalledWith("a");
+  });
+
+  it("should show clear button when value is not empty", () => {
+    // Arrange & Act
+    render(
+      <SearchInput
+        value="test"
+        onChange={jest.fn()}
+        placeholder="Search..."
+        data-test-id="search"
+      />,
+    );
+
+    // Assert
+    expect(screen.getByTestId("search-clear")).toBeInTheDocument();
+  });
+
+  it("should NOT show clear button when value is empty", () => {
+    // Arrange & Act
+    render(
+      <SearchInput value="" onChange={jest.fn()} placeholder="Search..." data-test-id="search" />,
+    );
+
+    // Assert
+    expect(screen.queryByTestId("search-clear")).not.toBeInTheDocument();
+  });
+
+  it("should call onChange with empty string when clear button is clicked", async () => {
+    // Arrange
+    const onChange = jest.fn();
+
+    render(
+      <SearchInput
+        value="test"
+        onChange={onChange}
+        placeholder="Search..."
+        data-test-id="search"
+      />,
+    );
+
+    // Act
+    await userEvent.click(screen.getByTestId("search-clear"));
+
+    // Assert
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("should call onChange with empty string when Escape is pressed", async () => {
+    // Arrange
+    const onChange = jest.fn();
+
+    render(<SearchInput value="test" onChange={onChange} placeholder="Search..." />);
+
+    // Act
+    const input = screen.getByPlaceholderText("Search...");
+
+    await userEvent.type(input, "{Escape}");
+
+    // Assert
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+});
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
new file mode 100644
index 00000000000..04a65ed3ce6
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -0,0 +1,75 @@
+import { Box } from "@saleor/macaw-ui-next";
+import { Search, X } from "lucide-react";
+import { useRef } from "react";
+
+import styles from "./SearchInput.module.css";
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  "data-test-id"?: string;
+}
+
+export const SearchInput = ({
+  value,
+  onChange,
+  placeholder,
+  "data-test-id": dataTestId = "search-input",
+}: SearchInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      gap={2}
+      paddingX={3}
+      paddingY={2}
+      borderWidth={1}
+      borderStyle="solid"
+      borderColor="default1"
+      borderRadius={3}
+      backgroundColor="default1"
+    >
+      <Box display="flex" alignItems="center" flexShrink="0">
+        <Search size={16} color="var(--mu-colors-text-default2)" />
+      </Box>
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Escape") {
+            onChange("");
+            inputRef.current?.blur();
+          }
+        }}
+        placeholder={placeholder}
+        data-test-id={dataTestId}
+        className={styles.input}
+      />
+      {value && (
+        <Box
+          as="button"
+          type="button"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          padding={0}
+          borderWidth={0}
+          backgroundColor="transparent"
+          cursor="pointer"
+          onClick={() => {
+            onChange("");
+            inputRef.current?.focus();
+          }}
+          data-test-id={`${dataTestId}-clear`}
+        >
+          <X size={16} color="var(--mu-colors-text-default2)" />
+        </Box>
+      )}
+    </Box>
+  );
+};

From a0352ed3427e80ddfd65f67796470e3f993c30ca Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Thu, 29 Jan 2026 23:54:28 +0100
Subject: [PATCH 05/11] Add ripple

---
 .../AttributeValues/AttributeValues.tsx       | 27 ++++++++++++-------
 .../ripples/attributeValuesSearch.ts          | 14 ++++++++++
 src/ripples/allRipples.ts                     |  4 +++
 3 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 src/attributes/ripples/attributeValuesSearch.ts

diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index 3b530b1bf95..1a33ae62a1e 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -1,3 +1,4 @@
+import { rippleAttributeValuesSearch } from "@dashboard/attributes/ripples/attributeValuesSearch";
 import { DashboardCard } from "@dashboard/components/Card";
 import { iconSize, iconStrokeWidthBySize } from "@dashboard/components/icons";
 import { Placeholder } from "@dashboard/components/Placeholder";
@@ -12,6 +13,7 @@ import {
   AttributeValueListFragment,
 } from "@dashboard/graphql";
 import { renderCollection, stopPropagation } from "@dashboard/misc";
+import { Ripple } from "@dashboard/ripples/components/Ripple";
 import { ListProps, PaginateListProps, RelayToFlat, ReorderAction } from "@dashboard/types";
 import { TableCell, TableHead } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -131,16 +133,21 @@ const AttributeValues = ({
           <Box display="flex" flexDirection="column" gap={4}>
             {/* Search input - always visible when search is enabled */}
             {showSearch && onSearchChange && (
-              <SearchInput
-                value={searchQuery}
-                onChange={onSearchChange}
-                placeholder={intl.formatMessage({
-                  id: "9seX5T",
-                  defaultMessage: "Search attribute values...",
-                  description: "attribute values search placeholder",
-                })}
-                data-test-id="attribute-value-search-input"
-              />
+              <Box position="relative">
+                <SearchInput
+                  value={searchQuery}
+                  onChange={onSearchChange}
+                  placeholder={intl.formatMessage({
+                    id: "9seX5T",
+                    defaultMessage: "Search attribute values...",
+                    description: "attribute values search placeholder",
+                  })}
+                  data-test-id="attribute-value-search-input"
+                />
+                <Box position="absolute" __top="-4px" __right="-4px">
+                  <Ripple model={rippleAttributeValuesSearch} />
+                </Box>
+              </Box>
             )}
             {/* No values at all (not searching) */}
             {values.length === 0 && !searchQuery ? (
diff --git a/src/attributes/ripples/attributeValuesSearch.ts b/src/attributes/ripples/attributeValuesSearch.ts
new file mode 100644
index 00000000000..aedb1b664a3
--- /dev/null
+++ b/src/attributes/ripples/attributeValuesSearch.ts
@@ -0,0 +1,14 @@
+import { Ripple } from "@dashboard/ripples/types";
+
+export const rippleAttributeValuesSearch: Ripple = {
+  type: "improvement",
+  ID: "attribute-values-search",
+  TTL_seconds: 60 * 60 * 24 * 5, // 5 days
+  dateAdded: new Date(2026, 0, 29),
+  content: {
+    oneLiner: "Search Attribute Values",
+    contextual: "Quickly find attribute values by name.",
+    global:
+      "You can now search through attribute values directly from the attribute details page. Find any value instantly, even in attributes with hundreds of options.",
+  },
+};
diff --git a/src/ripples/allRipples.ts b/src/ripples/allRipples.ts
index 4b678497364..04ba423293c 100644
--- a/src/ripples/allRipples.ts
+++ b/src/ripples/allRipples.ts
@@ -1,3 +1,4 @@
+import { rippleAttributeValuesSearch } from "@dashboard/attributes/ripples/attributeValuesSearch";
 import { checkoutAutocompleteSettings } from "@dashboard/channels/ripples/checkoutAutocompleteSettings";
 import { rippleCloudEnvLink } from "@dashboard/components/Sidebar/ripples/cloudEnvLink";
 import { ripplePagesAreModels } from "@dashboard/modeling/ripples/pagesAreModels";
@@ -29,6 +30,9 @@ export const allRipples: Ripple[] = [
   rippleProductAvailabilityDiagnostics,
   rippleVariantGenerator,
 
+  // Attributes
+  rippleAttributeValuesSearch,
+
   // ...
 
   // Core

From b67bd3b630b024e13f553b4d2801b9126442c665 Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Thu, 29 Jan 2026 23:56:35 +0100
Subject: [PATCH 06/11] Add tests

---
 src/components/SearchInput/SearchInput.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SearchInput/SearchInput.test.tsx b/src/components/SearchInput/SearchInput.test.tsx
index 9a77dbf9c62..191bb3bb428 100644
--- a/src/components/SearchInput/SearchInput.test.tsx
+++ b/src/components/SearchInput/SearchInput.test.tsx
@@ -60,6 +60,7 @@ describe("SearchInput", () => {
 
   it("should call onChange with empty string when clear button is clicked", async () => {
     // Arrange
+
     const onChange = jest.fn();
 
     render(

From 9f40d759af9056df3bb430c29e600758bbd53594 Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Fri, 30 Jan 2026 00:01:52 +0100
Subject: [PATCH 07/11] Extract messages

---
 locale/defaultMessages.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index c8d5c52fe3c..949b0b7b9dc 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -2026,6 +2026,10 @@
     "context": "section header",
     "string": "Product Attributes"
   },
+  "9seX5T": {
+    "context": "attribute values search placeholder",
+    "string": "Search attribute values..."
+  },
   "9uNz+T": {
     "context": "button",
     "string": "Cancel"
@@ -9176,6 +9180,10 @@
     "context": "order history message",
     "string": "Items were oversold"
   },
+  "oegjWf": {
+    "context": "attribute values list: no search results",
+    "string": "No values match your search"
+  },
   "of/+iV": {
     "context": "transaction event type, refund was reversed, funds are back to store account",
     "string": "Refund reversed"

From 78930ada6f1d1e828bb82fd33c1e54580093d3e4 Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Fri, 30 Jan 2026 07:53:04 +0100
Subject: [PATCH 08/11] Disable sorting when in search mode

---
 .../AttributeValues/AttributeValues.tsx       |  2 +-
 .../SortableTable/SortableHandle.tsx          | 10 +++++-
 .../SortableTable/SortableTableBody.tsx       | 31 ++++++++++++++-----
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index 1a33ae62a1e..5e827dca4f0 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -209,7 +209,7 @@ const AttributeValues = ({
                     <TableCell className={classes.iconCell} />
                   </TableRowLink>
                 </TableHead>
-                <SortableTableBody onSortEnd={onValueReorder}>
+                <SortableTableBody onSortEnd={onValueReorder} disabled={!!searchQuery}>
                   {renderCollection(values, (value, valueIndex) => (
                     <SortableTableRow<"row">
                       data-test-id="attributes-rows"
diff --git a/src/components/SortableTable/SortableHandle.tsx b/src/components/SortableTable/SortableHandle.tsx
index 39cc527276a..6736658abe8 100644
--- a/src/components/SortableTable/SortableHandle.tsx
+++ b/src/components/SortableTable/SortableHandle.tsx
@@ -1,9 +1,12 @@
 import { iconSize, iconStrokeWidthBySize } from "@dashboard/components/icons";
 import { TableCell } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
+import clsx from "clsx";
 import { GripVertical } from "lucide-react";
 import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
 
+import { useSortableContext } from "./SortableTableBody";
+
 const useStyles = makeStyles(
   theme => ({
     columnDrag: {
@@ -14,6 +17,10 @@ const useStyles = makeStyles(
       cursor: "grab",
       width: 40,
     },
+    disabled: {
+      cursor: "default",
+      opacity: 0.3,
+    },
   }),
   { name: "SortableHandle" },
 );
@@ -21,9 +28,10 @@ const useStyles = makeStyles(
 /** @deprecated This component should use @dnd-kit instead of react-sortable-hoc */
 const SortableHandle = SortableHandleHoc(() => {
   const classes = useStyles({});
+  const { disabled } = useSortableContext();
 
   return (
-    <TableCell className={classes.columnDrag}>
+    <TableCell className={clsx(classes.columnDrag, disabled && classes.disabled)}>
       <GripVertical size={iconSize.small} strokeWidth={iconStrokeWidthBySize.small} />
     </TableCell>
   );
diff --git a/src/components/SortableTable/SortableTableBody.tsx b/src/components/SortableTable/SortableTableBody.tsx
index 3f72e4dda90..69044514f1c 100644
--- a/src/components/SortableTable/SortableTableBody.tsx
+++ b/src/components/SortableTable/SortableTableBody.tsx
@@ -3,14 +3,20 @@ import { ReorderAction } from "@dashboard/types";
 import { TableBody } from "@material-ui/core";
 import { TableBodyProps } from "@material-ui/core/TableBody";
 import { makeStyles } from "@saleor/macaw-ui";
+import { createContext, useContext } from "react";
 import { SortableContainer } from "react-sortable-hoc";
 
+const SortableContext = createContext({ disabled: false });
+
+export const useSortableContext = () => useContext(SortableContext);
+
 const InnerSortableTableBody = SortableContainer<TableBodyProps>(({ children, ...props }) => (
   <TableBody {...props}>{children}</TableBody>
 ));
 
 interface SortableTableBodyProps {
   onSortEnd: ReorderAction;
+  disabled?: boolean;
 }
 
 const useStyles = makeStyles(
@@ -30,16 +36,25 @@ const useStyles = makeStyles(
 );
 
 /** @deprecated This component should use @dnd-kit instead of react-sortable-hoc */
-export const SortableTableBody = (props: Omit<TableBodyProps & SortableTableBodyProps, "ref">) => {
+export const SortableTableBody = ({
+  disabled,
+  children,
+  ...props
+}: Omit<TableBodyProps & SortableTableBodyProps, "ref">) => {
   const classes = useStyles({});
 
   return (
-    <InnerSortableTableBody
-      helperClass={classes.ghost}
-      axis="y"
-      lockAxis="y"
-      useDragHandle
-      {...props}
-    />
+    <SortableContext.Provider value={{ disabled: !!disabled }}>
+      <InnerSortableTableBody
+        helperClass={classes.ghost}
+        axis="y"
+        lockAxis="y"
+        useDragHandle
+        shouldCancelStart={() => !!disabled}
+        {...props}
+      >
+        {children}
+      </InnerSortableTableBody>
+    </SortableContext.Provider>
   );
 };

From 80928071c42740fce56764c819e3beadf783bc5a Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Fri, 30 Jan 2026 08:09:37 +0100
Subject: [PATCH 09/11] Don't pass the search query in variants

---
 src/graphql/hooks.generated.ts | 6 ++----
 src/graphql/types.generated.ts | 2 --
 src/products/queries.ts        | 2 --
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index 5ad6d0a7864..cf3fe946b81 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -15758,7 +15758,7 @@ export type ProductTypeQueryHookResult = ReturnType<typeof useProductTypeQuery>;
 export type ProductTypeLazyQueryHookResult = ReturnType<typeof useProductTypeLazyQuery>;
 export type ProductTypeQueryResult = Apollo.QueryResult<Types.ProductTypeQuery, Types.ProductTypeQueryVariables>;
 export const ProductVariantDetailsDocument = gql`
-    query ProductVariantDetails($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
+    query ProductVariantDetails($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
   productVariant(id: $id) {
     ...ProductVariant
   }
@@ -15782,7 +15782,6 @@ export const ProductVariantDetailsDocument = gql`
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
- *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
@@ -15798,7 +15797,7 @@ export type ProductVariantDetailsQueryHookResult = ReturnType<typeof useProductV
 export type ProductVariantDetailsLazyQueryHookResult = ReturnType<typeof useProductVariantDetailsLazyQuery>;
 export type ProductVariantDetailsQueryResult = Apollo.QueryResult<Types.ProductVariantDetailsQuery, Types.ProductVariantDetailsQueryVariables>;
 export const ProductVariantCreateDataDocument = gql`
-    query ProductVariantCreateData($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String, $searchValues: String) {
+    query ProductVariantCreateData($id: ID!, $firstValues: Int, $afterValues: String, $lastValues: Int, $beforeValues: String) {
   product(id: $id) {
     id
     media {
@@ -15868,7 +15867,6 @@ export const ProductVariantCreateDataDocument = gql`
  *      afterValues: // value for 'afterValues'
  *      lastValues: // value for 'lastValues'
  *      beforeValues: // value for 'beforeValues'
- *      searchValues: // value for 'searchValues'
  *   },
  * });
  */
diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
index c30d118b503..f1858c339aa 100644
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@@ -11719,7 +11719,6 @@ export type ProductVariantDetailsQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
-  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
@@ -11731,7 +11730,6 @@ export type ProductVariantCreateDataQueryVariables = Exact<{
   afterValues?: InputMaybe<Scalars['String']>;
   lastValues?: InputMaybe<Scalars['Int']>;
   beforeValues?: InputMaybe<Scalars['String']>;
-  searchValues?: InputMaybe<Scalars['String']>;
 }>;
 
 
diff --git a/src/products/queries.ts b/src/products/queries.ts
index fa82a73058e..d1b9b6a31c6 100644
--- a/src/products/queries.ts
+++ b/src/products/queries.ts
@@ -104,7 +104,6 @@ export const productVariantQuery = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
-    $searchValues: String
   ) {
     productVariant(id: $id) {
       ...ProductVariant
@@ -119,7 +118,6 @@ export const productVariantCreateQuery = gql`
     $afterValues: String
     $lastValues: Int
     $beforeValues: String
-    $searchValues: String
   ) {
     product(id: $id) {
       id

From b7f894859c94defe025de99b2dff99f3acb2c86c Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Fri, 30 Jan 2026 09:24:08 +0100
Subject: [PATCH 10/11] Simplify redundant condition

---
 src/attributes/components/AttributeValues/AttributeValues.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index 5e827dca4f0..f0a9acf6fec 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -132,7 +132,7 @@ const AttributeValues = ({
         ) : (
           <Box display="flex" flexDirection="column" gap={4}>
             {/* Search input - always visible when search is enabled */}
-            {showSearch && onSearchChange && (
+            {showSearch && (
               <Box position="relative">
                 <SearchInput
                   value={searchQuery}

From f7454a2ba363ef8aaf3b694ecb42ae6b528865d8 Mon Sep 17 00:00:00 2001
From: Mirek Mencel <mirek@saleor.io>
Date: Fri, 30 Jan 2026 09:36:18 +0100
Subject: [PATCH 11/11] Fix types

---
 src/attributes/components/AttributeValues/AttributeValues.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index f0a9acf6fec..72a058ea5c2 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -136,7 +136,7 @@ const AttributeValues = ({
               <Box position="relative">
                 <SearchInput
                   value={searchQuery}
-                  onChange={onSearchChange}
+                  onChange={onSearchChange!}
                   placeholder={intl.formatMessage({
                     id: "9seX5T",
                     defaultMessage: "Search attribute values...",