[pickers] New unstable field components #5504

flaviendelangle · 2022-07-15T10:42:30Z

These components are very early stage, please don't use them in production

Doc Preview of DateField
Doc Preview of DateRangeField

Part of #5531

Wanted interactions

Ability to add a day / a month / a year with the "ArrowUp" and "ArrowDown" keys
Ability to switch from day to month to year with the "ArrowLeft" and "ArrowRight" keys

Missing `@date-io` methods

addYear (similar to addDay and addMonth) => feat: New method addYear dmtrKovalenko/date-io#623

mui-bot · 2022-07-15T10:50:19Z

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	447.3	795.7	650.5	607.92	137.418
Sort 100k rows	ms	570.6	1,096.1	570.6	909.1	191.507
Select 100k rows	ms	213.9	299.9	278	262.12	32.464
Deselect 100k rows	ms	139.1	306.3	202.1	228	66.256

Generated by 🚫 dangerJS against 842cf5e

joserodolfofreitas · 2022-07-15T12:04:56Z

The interactions with arrow keys feel great! Could it somehow block the implementation for a chain of digits as input?

joserodolfofreitas · 2022-07-15T12:24:31Z

Btw, where does this POC leave us in terms of a single input implementation for a date range? Would a single input for a range use the same notion used here to isolate the specific 'pieces' of a date?

flaviendelangle · 2022-07-15T12:38:21Z

Btw, where does this POC leave us in terms of a single input implementation for a date range?

I did not look into it yet
It will definitely make the analysis of the input harder but maybe that's doable.
Let's try to see if it's viable for a the simple use case and then stress test it on harder one.

We also have the date time where we may want to handle it like Retool and open a select, in which case the input must only cover the date part.

flaviendelangle · 2022-07-15T12:38:41Z

Could it somehow block the implementation for a chain of digits as input?

I did not understand sorry

joserodolfofreitas · 2022-07-15T19:45:52Z

Could it somehow block the implementation for a chain of digits as input?

I did not understand sorry

I raised the question because I noticed you cannot input digits on the current text field POC. It currently only supports the arrow keys, so the question is: Will there be any problem with supporting numeric values as well?

And by "chain of digits", I meant if the user could type numbers like: 1 5 0 7 2 0 2 2 to have an output like 15/07/2022

edit: Just saw the latest update to support numeric values, so the question is now partially answered: we can already input numbers!

flaviendelangle · 2022-07-16T12:59:28Z

Will there be any problem with supporting numeric values as well?

Yes, I started to work on it.
It raised a certain amount of questions so I'm trying to get a first working draft to discuss trade-offs.
For instance on Telerik, when you have a full letter month, you can still type it's number and it sets the month (type 5 => sets "May")

flaviendelangle · 2022-07-18T11:26:26Z

@joserodolfofreitas Concerning the editing, Telerik does not goes from what section of the date to another automatically.

If you are on the day and type "1", "2", "3", it will set the day to "1", then "12", then "3".
To go to the section section you have to use the keyboard arrows.

Spectrum does move automatically to the next section.
For numerical value it is doable. But I'm curious to see how they handle that for full letter months.

This behavior could be customizable if we have users asking for both

github-actions · 2022-07-21T09:57:17Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2022-08-22T11:36:59Z

@gerdadesign

Also noting a pattern I've seen of the placeholder labels giving an indication for how many digits the input format is looking for: MM/DD/YYYY or DD/MM/YY

For now the placeholder of an empty section is the name of the section (month for a month section for instance)
Which is really basic and do not support any kind of localization.
We should probably improve this, I'm open to suggestions for the default behavior and the customization options.

flaviendelangle · 2022-08-22T11:38:13Z

Clearable example does not work correctly. It does not reset the value in the component.

@LukasTy I had a dumb bug where I did not use the controlled value in the component, several of your bugs were probably cause by this error, it is fixed now

packages/x-date-pickers/src/internals/hooks/useField/useField.ts

LukasTy · 2022-08-22T14:04:47Z

Clearable example does not work correctly. It does not reset the value in the component.

I had a dumb bug where I did not use the controlled value in the component, several of your bugs were probably cause by this error, it is fixed now

I can confirm that all my mentioned issues have been resolved. 🙌 👍

LukasTy · 2022-08-22T14:08:42Z

@flaviendelangle What do you think about adding the following diff?
It adds management of Home, End, PageUp and PageDown keys mentioned here as well as some function name alignment.
Note: We currently don't have a clear way to know actual max or min year, hence I did not that Home/End management for it.

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
index 5470f19c..84c01798 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
@@ -11,12 +11,13 @@ import {
   UseFieldState,
 } from './useField.interfaces';
 import {
+  AvailableAdjustKeyCode,
   cleanTrailingZeroInNumericSectionValue,
   getMonthsMatchingQuery,
   getSectionValueNumericBoundaries,
   getSectionVisibleValue,
-  incrementDateSectionValue,
-  incrementOrDecrementInvalidDateSection,
+  adjustDateSectionValue,
+  adjustInvalidDateSectionValue,
   setSectionValue,
 } from './useField.utils';
 
@@ -153,7 +154,7 @@ export const useField = <
       }
 
       // Reset the value of the selected section
-      case event.key === 'Backspace': {
+      case event.key === 'Backspace' || event.key === 'Delete': {
         event.preventDefault();
 
         if (readOnly) {
@@ -181,7 +182,12 @@ export const useField = <
       }
 
       // Increment / decrement the selected section value
-      case event.key === 'ArrowUp' || event.key === 'ArrowDown': {
+      case event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'Home' ||
+        event.key === 'End' ||
+        event.key === 'PageUp' ||
+        event.key === 'PageDown': {
         event.preventDefault();
 
         if (readOnly || state.selectedSectionIndexes == null) {
@@ -196,21 +202,21 @@ export const useField = <
 
         // The date is not valid, we have to increment the section value rather than the date
         if (!utils.isValid(activeDate.value)) {
-          const newSectionValue = incrementOrDecrementInvalidDateSection(
+          const newSectionValue = adjustInvalidDateSectionValue(
             utils,
             activeSection,
-            event.key === 'ArrowUp' ? 'increment' : 'decrement',
+            event.key as AvailableAdjustKeyCode,
           );
 
           updateSections(
             setSectionValue(state.sections, state.selectedSectionIndexes.start, newSectionValue),
           );
         } else {
-          const newDate = incrementDateSectionValue(
+          const newDate = adjustDateSectionValue(
             utils,
             activeDate.value,
             activeSection.dateSectionName,
-            event.key === 'ArrowDown' ? -1 : 1,
+            event.key as AvailableAdjustKeyCode,
           );
 
           const newValue = activeDate.update(newDate);
diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts
index 0dcd3f56..64977a0d 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts
@@ -37,33 +37,89 @@ export const getDateSectionNameFromFormat = (format: string): DateSectionName =>
   throw new Error(`getDatePartNameFromFormat don't understand the format ${format}`);
 };
 
-export const incrementDateSectionValue = <TDate>(
+export type AvailableAdjustKeyCode =
+  | 'ArrowUp'
+  | 'ArrowDown'
+  | 'PageUp'
+  | 'PageDown'
+  | 'Home'
+  | 'End';
+
+const getDeltaFromKeyCode = (keyCode: Omit<AvailableAdjustKeyCode, 'Home' | 'End'>) => {
+  switch (keyCode) {
+    case 'ArrowUp':
+      return 1;
+    case 'ArrowDown':
+      return -1;
+    case 'PageUp':
+      return 5;
+    case 'PageDown':
+      return -5;
+    default:
+      return 0;
+  }
+};
+
+export const adjustDateSectionValue = <TDate>(
   utils: MuiPickersAdapter<TDate>,
   date: TDate,
   datePartName: DateSectionName,
-  datePartValue: 1 | -1,
+  keyCode: AvailableAdjustKeyCode,
 ) => {
+  const delta = getDeltaFromKeyCode(keyCode);
+  const isStart = keyCode === 'Home';
+  const isEnd = keyCode === 'End';
   switch (datePartName) {
     case 'day': {
-      return utils.addDays(date, datePartValue);
+      if (isStart) {
+        return utils.startOfMonth(date);
+      }
+      if (isEnd) {
+        return utils.endOfMonth(date);
+      }
+      return utils.addDays(date, delta);
     }
     case 'month': {
-      return utils.addMonths(date, datePartValue);
+      if (isStart) {
+        return utils.startOfYear(date);
+      }
+      if (isEnd) {
+        return utils.endOfYear(date);
+      }
+      return utils.addMonths(date, delta);
     }
     case 'year': {
-      return utils.addYears(date, datePartValue);
+      return utils.addYears(date, delta);
     }
     case 'am-pm': {
-      return utils.addHours(date, datePartValue * 12);
+      return utils.addHours(date, delta ? 1 : 1 * 12);
     }
     case 'hour': {
-      return utils.addHours(date, datePartValue);
+      if (isStart) {
+        return utils.startOfDay(date);
+      }
+      if (isEnd) {
+        return utils.endOfDay(date);
+      }
+      return utils.addHours(date, delta);
     }
     case 'minute': {
-      return utils.addMinutes(date, datePartValue);
+      if (isStart) {
+        return utils.setMinutes(date, 0);
+      }
+      if (isEnd) {
+        return utils.setMinutes(date, 59);
+      }
+      return utils.addMinutes(date, delta);
     }
     case 'second': {
-      return utils.addSeconds(date, datePartValue);
+      if (isStart) {
+        return utils.setSeconds(date, 0);
+      }
+      if (isEnd) {
+        return utils.setSeconds(date, 59);
+      }
+      return utils.addSeconds(date, delta);
     }
     default: {
       return date;
@@ -277,13 +333,16 @@ export const getSectionValueNumericBoundaries = <TDate>(
   }
 };
 
-export const incrementOrDecrementInvalidDateSection = <TDate, TSection extends FieldSection>(
+export const adjustInvalidDateSectionValue = <TDate, TSection extends FieldSection>(
   utils: MuiPickersAdapter<TDate>,
   section: TSection,
-  type: 'increment' | 'decrement',
+  keyCode: AvailableAdjustKeyCode,
 ) => {
   const today = utils.date()!;
-  const delta = type === 'increment' ? 1 : -1;
+  const delta = getDeltaFromKeyCode(keyCode);
+  const isStart = keyCode === 'Home';
+  const isEnd = keyCode === 'End';
+  const shouldSetAbsolute = section.value === '' || isStart || isEnd;
 
   switch (section.dateSectionName) {
     case 'year': {
@@ -299,8 +358,8 @@ export const incrementOrDecrementInvalidDateSection = <TDate, TSection extends F
 
     case 'month': {
       let newDate: TDate;
-      if (section.value === '') {
-        if (type === 'increment') {
+      if (shouldSetAbsolute) {
+        if (delta > 0 || isEnd) {
           newDate = utils.endOfYear(today);
         } else {
           newDate = utils.startOfYear(today);
@@ -314,8 +373,8 @@ export const incrementOrDecrementInvalidDateSection = <TDate, TSection extends F
 
     case 'day': {
       let newDate: TDate;
-      if (section.value === '') {
-        if (type === 'increment') {
+      if (shouldSetAbsolute) {
+        if (delta > 0 || isEnd) {
           newDate = utils.endOfMonth(today);
         } else {
           newDate = utils.startOfMonth(today);
@@ -332,7 +391,7 @@ export const incrementOrDecrementInvalidDateSection = <TDate, TSection extends F
       const pm = utils.formatByString(utils.endOfDay(today), section.formatValue);
 
       if (section.value === '') {
-        if (type === 'increment') {
+        if (delta > 0 || isEnd) {
           return pm;
         }
         return am;
@@ -347,8 +406,8 @@ export const incrementOrDecrementInvalidDateSection = <TDate, TSection extends F
 
     case 'hour': {
       let newDate: TDate;
-      if (section.value === '') {
-        if (type === 'increment') {
+      if (shouldSetAbsolute) {
+        if (delta > 0 || isEnd) {
           newDate = utils.endOfDay(today);
         } else {
           newDate = utils.startOfDay(today);
@@ -362,9 +421,9 @@ export const incrementOrDecrementInvalidDateSection = <TDate, TSection extends F
 
     case 'minute': {
       let newDate: TDate;
-      if (section.value === '') {
+      if (shouldSetAbsolute) {
         // TODO: Add startOfHour and endOfHours to adapters to avoid hard-coding those values
-        const newNumericValue = type === 'increment' ? 59 : 0;
+        const newNumericValue = delta > 0 || isEnd ? 59 : 0;
         newDate = utils.setMinutes(today, newNumericValue);
       } else {
         newDate = utils.addMinutes(utils.setMinutes(today, Number(section.value)), delta);
@@ -375,9 +434,9 @@ export const incrementOrDecrementInvalidDateSection = <TDate, TSection extends F
 
     case 'second': {
       let newDate: TDate;
-      if (section.value === '') {
+      if (shouldSetAbsolute) {
         // TODO: Add startOfMinute and endOfMinute to adapters to avoid hard-coding those values
-        const newNumericValue = type === 'increment' ? 59 : 0;
+        const newNumericValue = delta > 0 || isEnd ? 59 : 0;
         newDate = utils.setSeconds(today, newNumericValue);
       } else {
         newDate = utils.addSeconds(utils.setSeconds(today, Number(section.value)), delta);

flaviendelangle · 2022-08-23T13:19:43Z

I applied @LukasTy suggestion to handle other keys edition

github-actions · 2022-08-23T17:03:36Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2022-08-24T17:45:06Z

Not trying to reopen the merged PR, but just continuing this convo! LMK if I should move it elsewhere.

Maybe move it to the issue #5531, it seems to be a good place to discuss cross PR topics around the fields.

oliviertassinari

It looks great! I have left a few comments as code comments so we can benefit from threads (#5531) doesn't provide this.

oliviertassinari · 2022-08-24T20:31:45Z

docs/data/date-pickers/date-field/CustomDateFormat.tsx

+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>


It might make the demo easier to scan:

Suggested change

<Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>

<Stack spacing={2} sx={{ width: 384 })}>

oliviertassinari · 2022-08-24T20:36:23Z

docs/data/date-pickers/date-field/BasicDateField.tsx

+export default function BasicDateField() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DateField label="Basic date field" />


End-users need to click twice to be able to select the year. Compare:

Screen.Recording.2022-08-24.at.22.33.21.mov

https://deploy-preview-5504--material-ui-x.netlify.app/x/react-date-pickers/date-field/#basic-usage

With (better):

Screen.Recording.2022-08-24.at.22.35.41.mov

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

This one is a known issue
You have the same in Telerik: https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/

The problem is that I select all sections on focus.
And when you click, it fires onFocus before onClick.
So when onClick is fired, the focus the selection caused by the focus is already applied, so it clicks on a fully selected input.

And on a fully selected input, I can't find the cursor position of the click, the cursor just moves to the beginning of the input.

One solution would be to delay the selection caused by the focus and to skip it if a click selection has been done in the meanwhile.

I select all sections on focus

I would dive into this. I think it's where the problem starts:

mui-x/packages/x-date-pickers/src/internals/hooks/useField/useField.ts

Lines 319 to 322 in 8db0bfa

const handleInputFocus = useEventCallback(() => {

// TODO: Avoid applying focus when focus is caused by a click

updateSelectedSections(0, state.sections.length - 1);

});

Maybe instead of a "select all" on focus, the browser does it automatically when focusing an input with a Tab, we could look at inputRef.current.selectionEnd - inputRef.current.selectionStart. If the value equals 0 it would mean that it wasn't a keyboard focus, it was a click focus with a caret that has no selections. Then, we can look at where the current selection is on, and select the corresponding segment.

I have a PR to improve this behavior #5901

oliviertassinari · 2022-08-24T20:42:57Z

docs/data/date-pickers/date-field/LocalizedDateField.tsx

+          <DateField
+            label="French locale (default format)"
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+          />
+          <DateField
+            label="French locale (full letter month)"
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+            format="dd MMMM yyyy"
+          />


I agree with #5531 (comment). We might want to change the placeholder. Say the input is empty:

Can you guess that it should look like this in the end?

https://deploy-preview-5504--material-ui-x.netlify.app/x/react-date-pickers/date-field/#localization

It might be clearer like this for the first textbox:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

The second advantage is that it would minimize layout shifts.

The placeholder is clearly temporary.

Telerik uses the section type

Spectrum uses something closer from the date tokens

oliviertassinari · 2022-08-24T20:47:41Z

docs/data/date-pickers/date-field/BasicDateField.js

+export default function BasicDateField() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DateField label="Basic date field" />


Should we allow 00?

Maybe we should reset the field when this happens

I don't know for this one
In Spectrum, if I press 0 it does not write anything, even if the end format will be 01

Press 0 => still render the placeholder (totally ignores the event I think)
Press 1 => renders 01

Should we allow 00?

To be more precise, I was thinking of what would happen when leaving the selection. A native browser seems to turn 00 to 01 when unselecting.

oliviertassinari · 2022-11-13T00:25:59Z

packages/x-date-pickers/src/DateField/DateField.tsx

+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+
+import { DateFieldProps } from './DateField.interfaces';
+import { useDateField } from './useDateField';
+
+type DateFieldComponent = (<TInputDate, TDate = TInputDate>(
+  props: DateFieldProps<TInputDate, TDate> & React.RefAttributes<HTMLInputElement>,
+) => JSX.Element) & { propTypes?: any };
+
+export const DateField = React.forwardRef(function DateField<TInputDate, TDate = TInputDate>(
+  inProps: DateFieldProps<TInputDate, TDate>,
+  ref: React.Ref<HTMLInputElement>,
+) {
+  const { inputRef, inputProps } = useDateField<
+    TInputDate,
+    TDate,
+    DateFieldProps<TInputDate, TDate>
+  >(inProps);
+
+  return <TextField ref={ref} inputRef={inputRef} {...inputProps} />;
+}) as DateFieldComponent;


Looking at the simplicity of the code, I almost feel like it would be better to expose this userland. Not sure.

It is exposed and should be documented soon

Do you think we should not expose the component ?

OK great to know.

Do you think we should not expose the component ?

I can't make my mind on this. I think that it's not impossible that we could be better off without this abstraction, with the rationale that lower level API makes easier customizations.

As a side note, I wonder if developers won't expect to be able to target MuiDateField in the theme.

https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/DateField/DateField.tsx

The component has a little more logic know and supports theme overrides as you mentionned.
And we have multi-input range fields with a lot more logic (those I would clearly not remove them).

[POC] New component DateField

a27e983

flaviendelangle added the component: pickers This is the name of the generic UI component, not the React module! label Jul 15, 2022

flaviendelangle self-assigned this Jul 15, 2022

flaviendelangle added 3 commits July 15, 2022 15:26

Work on keyboard edit with numeric value

bfbc627

mend

f65cfe5

Work

8333afd

flaviendelangle added 4 commits July 18, 2022 10:11

Work

85e5af2

Support letter editing (basic) for months

51ab705

Work

03ffed4

Prettier

7afab04

flaviendelangle mentioned this pull request Jul 18, 2022

[pickers] New component: DateField #5531

Closed

flaviendelangle added 6 commits July 18, 2022 20:21

Work

dc58f12

Work on empty values

7d2a453

Continue working on empty value

24b1a6c

Work

d9994a0

Fix

5e025e7

Fix

be952ae

flaviendelangle mentioned this pull request Jul 19, 2022

feat: New method addYear dmtrKovalenko/date-io#623

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 21, 2022

Merge

d1a1ebc

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 21, 2022

Fix

6c7fb7e

LukasTy reviewed Aug 22, 2022

View reviewed changes

packages/x-date-pickers/src/internals/hooks/useField/useField.ts Outdated Show resolved Hide resolved

flaviendelangle added 2 commits August 22, 2022 14:14

Fix

7a62420

Fix

e9ed42f

flaviendelangle added 3 commits August 23, 2022 09:34

Merge branch 'master' into date-field

7b7cc0a

Code review: Lukas

209409f

Fix

436d3aa

Merge branch 'master' into date-field

f288a3f

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 23, 2022

flaviendelangle added 2 commits August 24, 2022 10:02

Work

37614b8

Merge

842cf5e

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 24, 2022

LukasTy approved these changes Aug 24, 2022

View reviewed changes

flaviendelangle merged commit 5416854 into mui:master Aug 24, 2022

flaviendelangle deleted the date-field branch August 24, 2022 12:58

This comment was marked as duplicate.

Sign in to view

oliviertassinari added the new feature New feature or request label Aug 24, 2022

oliviertassinari reviewed Aug 24, 2022

View reviewed changes

oliviertassinari mentioned this pull request Aug 25, 2022

[Autocomplete] Update unstyled demo to not import Material UI mui/material-ui#34060

Merged

alexfauquette pushed a commit to alexfauquette/mui-x that referenced this pull request Aug 26, 2022

[pickers] New unstable field components (mui#5504)

7c7989f

oliviertassinari mentioned this pull request Sep 17, 2022

[pickers] Improve DOM event management on useField #5901

Merged

oliviertassinari reviewed Nov 13, 2022

View reviewed changes

oliviertassinari mentioned this pull request Nov 13, 2022

[Joy] Add Autocomplete component mui/material-ui#34315

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pickers] New unstable field components #5504

[pickers] New unstable field components #5504

flaviendelangle commented Jul 15, 2022 •

edited

Loading

mui-bot commented Jul 15, 2022 •

edited

Loading

joserodolfofreitas commented Jul 15, 2022

joserodolfofreitas commented Jul 15, 2022

flaviendelangle commented Jul 15, 2022

flaviendelangle commented Jul 15, 2022

joserodolfofreitas commented Jul 15, 2022 •

edited

Loading

flaviendelangle commented Jul 16, 2022

flaviendelangle commented Jul 18, 2022 •

edited

Loading

github-actions bot commented Jul 21, 2022

flaviendelangle commented Aug 22, 2022

flaviendelangle commented Aug 22, 2022

LukasTy commented Aug 22, 2022

LukasTy commented Aug 22, 2022

flaviendelangle commented Aug 23, 2022

github-actions bot commented Aug 23, 2022

This comment was marked as duplicate.

flaviendelangle commented Aug 24, 2022

oliviertassinari left a comment

oliviertassinari Aug 24, 2022

oliviertassinari Aug 24, 2022

flaviendelangle Aug 25, 2022

oliviertassinari Aug 25, 2022 •

edited

Loading

flaviendelangle Aug 25, 2022

oliviertassinari Aug 24, 2022 •

edited

Loading

flaviendelangle Aug 25, 2022

oliviertassinari Aug 24, 2022

flaviendelangle Aug 25, 2022

oliviertassinari Aug 25, 2022

oliviertassinari Nov 13, 2022 •

edited

Loading

flaviendelangle Nov 14, 2022

oliviertassinari Nov 14, 2022

flaviendelangle Nov 14, 2022

	<Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
	<Stack spacing={2} sx={{ width: 384 })}>

	const handleInputFocus = useEventCallback(() => {
	// TODO: Avoid applying focus when focus is caused by a click
	updateSelectedSections(0, state.sections.length - 1);
	});

[pickers] New unstable field components #5504

[pickers] New unstable field components #5504

Conversation

flaviendelangle commented Jul 15, 2022 • edited Loading

Wanted interactions

Missing @date-io methods

mui-bot commented Jul 15, 2022 • edited Loading

joserodolfofreitas commented Jul 15, 2022

joserodolfofreitas commented Jul 15, 2022

flaviendelangle commented Jul 15, 2022

flaviendelangle commented Jul 15, 2022

joserodolfofreitas commented Jul 15, 2022 • edited Loading

flaviendelangle commented Jul 16, 2022

flaviendelangle commented Jul 18, 2022 • edited Loading

github-actions bot commented Jul 21, 2022

flaviendelangle commented Aug 22, 2022

flaviendelangle commented Aug 22, 2022

LukasTy commented Aug 22, 2022

LukasTy commented Aug 22, 2022

flaviendelangle commented Aug 23, 2022

github-actions bot commented Aug 23, 2022

This comment was marked as duplicate.

flaviendelangle commented Aug 24, 2022

oliviertassinari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Aug 25, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Aug 24, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Nov 13, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flaviendelangle commented Jul 15, 2022 •

edited

Loading

Missing `@date-io` methods

mui-bot commented Jul 15, 2022 •

edited

Loading

joserodolfofreitas commented Jul 15, 2022 •

edited

Loading

flaviendelangle commented Jul 18, 2022 •

edited

Loading

oliviertassinari Aug 25, 2022 •

edited

Loading

oliviertassinari Aug 24, 2022 •

edited

Loading

oliviertassinari Nov 13, 2022 •

edited

Loading