mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.34k stars 1.3k forks source link

DateRangePicker value is truncated on MAC #14736

Closed HJK181 closed 1 month ago

HJK181 commented 1 month ago

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-n6enhx?file=Demo.tsx

Steps:

  1. select a date range and see the input value to-date is truncated

Current behavior

The selected input data range value is not fully visible on MAC but on different OS like Linux.

MAC: Bildschirmfoto 2024-09-26 um 10 19 53 Linux: image

Expected behavior

The complete value of the date range picker value is visible regardless of the OS

Context

No response

Your environment

see the stackblitz package.json

Search keywords: DateRangePicker truncated MAC Order ID: 85015

flaviendelangle commented 1 month ago

The input has the width of any regular input. It's default width is determined by the browser. We are not enforcing any minimal width to avoid conflicting with the layout you are using.

Here is an example using a flex container

Another reason we don't want to enforce any default width is that this default value would have to depend on the format and thus on the user locale. This would make the integration of the field in a real form quite complex.

HJK181 commented 1 month ago

It's default width is determined by the browser.

This doesn't seem to be true, as for both screenshots Chrome was used. The difference is just the OS.

So you say it's just a coincidence that on Chrome, Firefox on Linux the width of the input is just wide enough to fit the complete input value?

flaviendelangle commented 1 month ago

So you say it's just a coincidence that on Chrome, Firefox on Linux the width of the input is just wide enough to fit the complete input value?

Yes

This doesn't seem to be true, as for both screenshots Chrome was used. The difference is just the OS.

The browser might have a default behavior based on some other attributes (device, OS, screen dimension). But we are not applying any custom logic to make sure the width fits the content.

HJK181 commented 1 month ago

Ok, thanks. The issue can be closed than.

github-actions[bot] commented 1 month ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] We value your feedback @HJK181! How was your experience with our support team? We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!