Repository: grommet/grommet (2025-07-21T22:57:49Z)

Issue:
FileInput -- "browse" button/anchor should receive `disabled` prop
Similar to https://github.com/grommet/grommet/pull/7512, FileInput should pass `disabled` to "Browse" Button/Anchor as well.


Discussion:
Is this to help with styling? In testing for #7512 the browse button and anchor were basically disabled by their container and didn't seem to need to be disabled separately unlike the X.
Yes, this is to help with styling. In grommet-theme-hpe, we're heading towards using disabled colors rather than opacity. So disabled prop is needed to allow the button/anchor disabled styles to apply.

In addition to visual styling, I'm also still getting a cursor change so it doesn't fully "feel" disabled even though it functionally is.



Patch:
diff --git a/src/js/components/Anchor/Anchor.js b/src/js/components/Anchor/Anchor.js
index 24cc77bed8a..52eb1993147 100644
--- a/src/js/components/Anchor/Anchor.js
+++ b/src/js/components/Anchor/Anchor.js
@@ -96,10 +96,14 @@ const Anchor = forwardRef(
         reverse={reverse}
         href={!disabled ? href : undefined}
         onClick={!disabled ? onClick : undefined}
-        onFocus={(event) => {
-          setFocus(true);
-          if (onFocus) onFocus(event);
-        }}
+        onFocus={
+          !disabled
+            ? (event) => {
+                setFocus(true);
+                if (onFocus) onFocus(event);
+              }
+            : undefined
+        }
         onBlur={(event) => {
           setFocus(false);
           if (onBlur) onBlur(event);
diff --git a/src/js/components/FileInput/FileInput.js b/src/js/components/FileInput/FileInput.js
index 98ae9e1219e..c4e34e74b9e 100644
--- a/src/js/components/FileInput/FileInput.js
+++ b/src/js/components/FileInput/FileInput.js
@@ -347,6 +347,7 @@ const FileInput = forwardRef(
                       <Button
                         // The focus here is redundant for keyboard users
                         tabIndex={-1}
+                        disabled={disabled}
                         ref={controlRef}
                         kind={theme.fileInput.button}
                         label={format({
@@ -363,6 +364,7 @@ const FileInput = forwardRef(
                         // The focus here is redundant for keyboard users
                         tabIndex={-1}
                         alignSelf="center"
+                        disabled={disabled}
                         ref={controlRef}
                         margin="small"
                         onClick={() => {
@@ -421,6 +423,7 @@ const FileInput = forwardRef(
                     <Button
                       // The focus here is redundant for keyboard users
                       tabIndex={-1}
+                      disabled={disabled}
                       ref={controlRef}
                       kind={theme.fileInput.button}
                       label={format({
@@ -437,6 +440,7 @@ const FileInput = forwardRef(
                       // The focus here is redundant for keyboard users
                       tabIndex={-1}
                       alignSelf="center"
+                      disabled={disabled}
                       ref={controlRef}
                       margin="small"
                       onClick={() => {
@@ -518,6 +522,7 @@ const FileInput = forwardRef(
                         <Button
                           // The focus here is redundant for keyboard users
                           tabIndex={-1}
+                          disabled={disabled}
                           ref={controlRef}
                           kind={theme.fileInput.button}
                           label={format({
@@ -533,6 +538,7 @@ const FileInput = forwardRef(
                         <Anchor
                           // The focus here is redundant for keyboard users
                           tabIndex={-1}
+                          disabled={disabled}
                           ref={controlRef}
                           margin="small"
                           onClick={() => {


Test patch:
diff --git a/src/js/components/FileInput/__tests__/__snapshots__/FileInput-test.tsx.snap b/src/js/components/FileInput/__tests__/__snapshots__/FileInput-test.tsx.snap
index 3b722bf8522..86e57380d96 100644
--- a/src/js/components/FileInput/__tests__/__snapshots__/FileInput-test.tsx.snap
+++ b/src/js/components/FileInput/__tests__/__snapshots__/FileInput-test.tsx.snap
@@ -1085,10 +1085,9 @@ exports[`FileInput disabled 1`] = `
   cursor: pointer;
   align-self: center;
   margin: 12px;
-}
-
-.c6:hover {
-  text-decoration: underline;
+  opacity: 0.3;
+  cursor: default;
+  text-decoration: none;
 }
 
 .c5 {
@@ -1207,6 +1206,7 @@ exports[`FileInput disabled 1`] = `
       </span>
       <a
         class="c6"
+        disabled=""
         tabindex="-1"
       >
         browse
@@ -1334,10 +1334,9 @@ exports[`FileInput disabled with file selected 1`] = `
   text-decoration: none;
   cursor: pointer;
   margin: 12px;
-}
-
-.c13:hover {
-  text-decoration: underline;
+  opacity: 0.3;
+  cursor: default;
+  text-decoration: none;
 }
 
 .c2 {
@@ -1585,6 +1584,7 @@ exports[`FileInput disabled with file selected 1`] = `
               </button>
               <a
                 class="c13"
+                disabled=""
                 tabindex="-1"
               >
                 browse