Repository: grommet/grommet (2025-07-21T23:24:08Z)

Issue:
DateInput -- should disable "Calendar" button when input is disabled
DateInput should disable the Calendar button when the input is disabled. Currently it's still enabled:

https://github.com/user-attachments/assets/2724dec6-aa6a-4f15-bea0-54d415141ede


Discussion:
hey, I have fixed this bug it seems, just wanted to ask if it's okay to send the pull request along with the files I have created for testing the component or should it be just the updated component?  
@meezumi Thank you! Yes feel free to file a PR with the fix and we will review it. Including a test would be a bonus 👍 
Alright thanks :) I have filed a PR just now which is ready for review. Apologies for my lack of experience as I'm new to open source.  



Patch:
diff --git a/src/js/components/DateInput/DateInput.js b/src/js/components/DateInput/DateInput.js
index b47f594302f..746826e4c97 100644
--- a/src/js/components/DateInput/DateInput.js
+++ b/src/js/components/DateInput/DateInput.js
@@ -290,6 +290,7 @@ Use the icon prop instead.`,
 
     const DateInputButton = readOnlyCopy ? (
       <CopyButton
+        disabled={disabled}
         onBlurCopy={onBlurCopy}
         onClickCopy={onClickCopy}
         readOnlyCopyPrompt={readOnlyCopyPrompt}
@@ -299,6 +300,7 @@ Use the icon prop instead.`,
     ) : (
       <Button
         onClick={open ? closeCalendar : openCalendar}
+        disabled={disabled}
         plain
         icon={icon || MaskedInputIcon || <CalendarIcon size={iconSize} />}
         margin={reverse ? { left: 'small' } : { right: 'small' }}
diff --git a/src/js/components/TextInput/CopyButton.js b/src/js/components/TextInput/CopyButton.js
index 9ac4a1ad627..9dae4580598 100644
--- a/src/js/components/TextInput/CopyButton.js
+++ b/src/js/components/TextInput/CopyButton.js
@@ -17,6 +17,7 @@ const StyledButton = styled(Button)`
 `;
 
 export const CopyButton = ({
+  disabled,
   onClickCopy,
   onBlurCopy,
   readOnlyCopyPrompt,
@@ -28,6 +29,7 @@ export const CopyButton = ({
   return (
     <Tip dropProps={{ align: { bottom: 'top' } }} content={tip}>
       <StyledButton
+        disabled={disabled}
         onClick={onClickCopy}
         icon={<Copy />}
         pad={{
diff --git a/src/js/components/TextInput/TextInput.js b/src/js/components/TextInput/TextInput.js
index 281cd96d6c5..4a8b2a478b6 100644
--- a/src/js/components/TextInput/TextInput.js
+++ b/src/js/components/TextInput/TextInput.js
@@ -74,6 +74,7 @@ const TextInput = forwardRef(
       a11yTitle,
       defaultSuggestion,
       defaultValue,
+      disabled,
       dropAlign = defaultDropAlign,
       dropHeight,
       dropTarget,
@@ -480,6 +481,7 @@ const TextInput = forwardRef(
 
     const ReadOnlyCopyButton = (
       <CopyButton
+        disabled={disabled}
         onBlurCopy={onBlurCopy}
         onClickCopy={onClickCopy}
         readOnlyCopyPrompt={readOnlyCopyPrompt}
@@ -515,6 +517,7 @@ const TextInput = forwardRef(
             id={id}
             name={name}
             autoComplete="off"
+            disabled={disabled}
             plain={plain}
             placeholder={
               typeof placeholder === 'string' ? placeholder : undefined


Test patch:
diff --git a/src/js/components/DateInput/__tests__/__snapshots__/DateInput-test.tsx.snap b/src/js/components/DateInput/__tests__/__snapshots__/DateInput-test.tsx.snap
index 8e20e8bad0e..1c0975b0935 100644
--- a/src/js/components/DateInput/__tests__/__snapshots__/DateInput-test.tsx.snap
+++ b/src/js/components/DateInput/__tests__/__snapshots__/DateInput-test.tsx.snap
@@ -6936,6 +6936,8 @@ exports[`DateInput format disabled 1`] = `
   border: none;
   padding: 0;
   text-align: inherit;
+  opacity: 0.3;
+  cursor: default;
   line-height: 0;
 }
 
@@ -7088,6 +7090,7 @@ exports[`DateInput format disabled 1`] = `
     </div>
     <button
       class="c5"
+      disabled=""
       type="button"
     >
       <svg