Skip to content

fix(react-input, react-textarea): Fix Field control size handling#36453

Open
dmytrokirpa wants to merge 1 commit into
microsoft:masterfrom
dmytrokirpa:fix/field-input-textarea-sizes
Open

fix(react-input, react-textarea): Fix Field control size handling#36453
dmytrokirpa wants to merge 1 commit into
microsoft:masterfrom
dmytrokirpa:fix/field-input-textarea-sizes

Conversation

@dmytrokirpa

@dmytrokirpa dmytrokirpa commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Fixes Field control size handling for Input and Textarea components

Changes

  • Fixed size handling in Input component (useInput hook)
  • Fixed size handling in Textarea component (useTextarea hook)

Packages affected

  • @fluentui/react-input (patch)
  • @fluentui/react-textarea (patch)

Beachball change files have been created for both packages.

Before (all inputs doesn't respect field size)

image

After (inputs respect field size)

image

@github-actions

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.294 MB
326.152 kB
1.294 MB
326.189 kB
84 B
37 B
react-datepicker-compat
DatePicker Compat
216.224 kB
63.964 kB
216.276 kB
63.974 kB
52 B
10 B
react-headless-components-preview
react-headless-components-preview: entire library
247.572 kB
71.442 kB
247.608 kB
71.453 kB
36 B
11 B
react-input
Input
25.027 kB
8.183 kB
25.092 kB
8.212 kB
65 B
29 B
react-textarea
Textarea
23.392 kB
8.447 kB
23.457 kB
8.478 kB
65 B
31 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
66.281 kB
19.002 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
226.026 kB
68.049 kB
react-components
react-components: FluentProvider & webLightTheme
39.504 kB
13.112 kB
react-portal-compat
PortalCompatProvider
5.341 kB
2.146 kB
react-timepicker-compat
TimePicker
140.867 kB
46.058 kB
🤖 This report was generated against d712b3c8fb9a22c8fd3d85183deff8a6167b5265

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 478 Changed
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 1202 Changed
vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png 479 Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 1096 Changed
vr-tests-react-components/Field 5 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Field.Input+horizontal.default.chromium.png 5610 Changed
vr-tests-react-components/Field.Textarea+horizontal.default.chromium.png 2696 Changed
vr-tests-react-components/Field.Textarea.default.chromium.png 3543 Changed
vr-tests-react-components/Field.size-large.default.chromium.png 3841 Changed
vr-tests-react-components/Field.size-small.default.chromium.png 3841 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 897 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 44 Changed
vr-tests-react-components/ProgressBar converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 34 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 43 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

@dmytrokirpa
dmytrokirpa marked this pull request as ready for review July 25, 2026 16:13
@dmytrokirpa
dmytrokirpa requested review from a team and mainframev as code owners July 25, 2026 16:13
});

expect(result.current.input.value).toBe('test');
expect(result.current.size).toBe('large');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

q: is this expected behaviour in terms of design language consistency ? user can go wild and use various sizes between field/input ?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From a design language point of view, I’m not sure this is behaving as expected. In the all controls implementation, context values act as defaults, and component props override them.

const fieldControlProps = useFieldControlProps_unstable(props, {
supportsLabelFor: true,
supportsRequired: true,
supportsSize: true,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

with these changes is this prop dead API now ? it is still used in TagPickerInput, should we reflect these changes there as well ?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's not a dead API, it just doesn't make sense for base hooks as they shouldn't have style props (size/appearance/etc)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll double check for TagPicker and other components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants