Improve input mask UX and a11y #1661

dmtrKovalenko · 2020-04-15T14:43:15Z

Linked issues:

closes DateRangePicker do not display result in inputs for luxon adapter #1660
closes Change the display "__/__/____" when entering date for KeyboardDatePicker #1409
closes Keyboard picker with dayjs does not allow last minute digit to be typed in #1352
closes Can no longer access keepCharPositions parameter in version 3.1.0 #1144

Breaking changes

Remove maskChar prop, because it is not visible for users anymore and need only to generate and parse mask pattern.

Features

Change the logic of the input mask to be more accessible and less noisy.

It is not rendering the whole mask from now (12/1_/____) for partial input it will show only typed part and the next delimiter (12/12/). And still does not allow to enter invalid symbols and type outside of date format.
Generate user-readable placeholder and helper text thanks to Introduce new getFormatHelperText method dmtrKovalenko/date-io#340. This should significantly increase UX for keyboard input

… placeholder

vercel · 2020-04-15T14:43:19Z

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/mui-org/material-ui-pickers/22ekls0i1
✅ Preview: https://material-ui-pickers-git-feature-better-mask-input.mui-org.now.sh

oliviertassinari

What's the implication with rifm, does it mean we no longer need it?

oliviertassinari · 2020-04-15T14:51:36Z

lib/src/_shared/KeyboardDateInput.tsx

@@ -83,7 +80,7 @@ export const KeyboardDateInput: React.FC<DateInputProps & DateInputRefs> = ({
    if ((rawValue === null || utils.isValid(rawValue)) && !isFocused) {
      setInnerInputValue(getInputValue());
    }
-  }, [rawValue]); // eslint-disable-line
+  }, [rawValue, utils, inputFormat]); // eslint-disable-line


Suggested change

}, [rawValue, utils, inputFormat]); // eslint-disable-line

}, [rawValue, utils, inputFormat]);

There is a side-effect vakye isFocused which should not be used as a dependency. Do you think we need to move it to refs?

I don't follow. If we use isFocused in the logic, why not include it in the dependency? If it doesn't have a negative side effect, and if it allows us to removes eslint-disable-line. Then, it could help us catch issues after a future refactoring?

We don't need to run effect if the input is changed state from focus to blur. We only need to handle it differently by the fact of focused state.

So this focused state does not need to be state actually. It can be a ref

const isFocusedRef = React.useRef(false) onFocus={() => isFocusedRef.current = true} onBlur={() => isFocusedRef.current = false}

And I am actually thinking about making it a ref...

+1 for using a ref if we don't need to rerender.

I can see emptyInputText as a dependency that is also ignored. Is this a dead prop?

oliviertassinari · 2020-04-15T14:51:53Z

lib/src/_shared/hooks/usePickerState.ts

@@ -44,7 +44,7 @@ export function usePickerState<TInput, TDateValue>(
    if (!valueManager.areValuesEqual(pickerDate, date)) {
      setPickerDate(date);
    }
-  }, [value]); // eslint-disable-line
+  }, [value, utils]); // eslint-disable-line


Suggested change

}, [value, utils]); // eslint-disable-line

}, [value, utils]);

dmtrKovalenko · 2020-04-15T14:54:29Z

The logic of masked input is still working through the rifm, it is actually a tool for this (saving cursor position during input formats).

cypress · 2020-04-15T15:00:23Z

Test summary

69 • 0 • 1 • 0

Run details


Project	material-ui-pickers
Status	Passed
Commit	`26843b3`
Started	Apr 21, 2020 10:18 AM
Ended	Apr 21, 2020 10:19 AM
Duration	01:12 💡
OS	Linux Debian - 9.11
Browser	Chrome 78

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

codecov · 2020-04-16T14:07:27Z

Codecov Report

Merging #1661 into next will decrease coverage by 0.49%.
The diff coverage is 75.60%.

@@            Coverage Diff             @@
##             next    #1661      +/-   ##
==========================================
- Coverage   89.76%   89.26%   -0.50%     
==========================================
  Files          73       73              
  Lines        2315     2320       +5     
  Branches      402      423      +21     
==========================================
- Hits         2078     2071       -7     
- Misses        190      198       +8     
- Partials       47       51       +4

Impacted Files	Coverage Δ
lib/src/_shared/PureDateInput.tsx	`100.00% <ø> (ø)`
lib/src/DateRangePicker/DateRangePickerInput.tsx	`68.18% <33.33%> (-1.66%)`	⬇️
lib/src/DateRangePicker/DateRangePickerView.tsx	`81.70% <66.66%> (-0.80%)`	⬇️
lib/src/_shared/KeyboardDateInput.tsx	`92.20% <75.00%> (-1.13%)`	⬇️
lib/src/_shared/hooks/usePickerState.ts	`85.71% <80.00%> (+0.52%)`	⬆️
lib/src/_helpers/text-field-helper.ts	`86.48% <93.33%> (-13.52%)`	⬇️
lib/src/_helpers/utils.ts	`73.33% <0.00%> (+6.66%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bd53c63...26843b3. Read the comment docs.

dmtrKovalenko · 2020-04-16T14:08:48Z

lib/src/DateRangePicker/DateRangePickerInput.tsx

@@ -81,15 +86,23 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({
    }
  }, [currentlySelectingRangeEnd, open]);

+  // TODO: rethink this approach. We do not need to wait for calendar to be updated to rerender input (looks like freezing)
+  // TODO: so simply break 1 react's commit phase in 2 (first for input and second for calendars) by executing onChange in the next tick
+  const lazyHandleChangeCallback = React.useCallback(


Described more in this twitter thread

Is the underlying issue that the calendar (containing ~30 days instances) too slow to update?

Yeah it is slow, cause actually 70+ days for standard desktop calendar.

Moreover it is working like throttle but on the react level. User doesn’t expect to see January of 0002 year when input is 01/01/2

dmtrKovalenko added 4 commits April 15, 2020 16:03

Add jest debug configuration

80c5bd2

Move jest config to separate file

4e2d64b

Change input mask generation logic

ddbd418

Use new geFormatHelperText date-io method to generate helper text and…

47e9148

… placeholder

dmtrKovalenko added the enhancement New feature or request label Apr 15, 2020

oliviertassinari reviewed Apr 15, 2020

View reviewed changes

Update @date-io/jalaali and @date-io/hijiri

626c7a3

vercel bot deployed to Preview April 15, 2020 14:55 View deployment

dmtrKovalenko added 3 commits April 16, 2020 15:06

[docs] Update component demo titles

b897486

Fix mask input issues and update e2e tests

24da940

Optimize new masked input for date range picker

de1ea77

vercel bot deployed to Preview April 16, 2020 13:34 View deployment

dmtrKovalenko added 2 commits April 16, 2020 16:49

Remove meaningless comment

25421fe

Update component based tests

0da9a5d

vercel bot requested a deployment to Preview April 16, 2020 13:59 Pending

Use auto injecting dependencies for hooks

526d8f9

dmtrKovalenko commented Apr 16, 2020

View reviewed changes

vercel bot deployed to Preview April 16, 2020 14:10 View deployment

dmtrKovalenko added 2 commits April 16, 2020 17:15

Remove maskChar prop

2b46467

Again remove date from the useEffect dependency in usePickerState

55b082f

vercel bot deployed to Preview April 16, 2020 14:23 View deployment

dmtrKovalenko changed the title ~~Better mask input~~ Improve input mask UX and a11y Apr 16, 2020

dmtrKovalenko requested a review from oliviertassinari April 16, 2020 16:19

oliviertassinari approved these changes Apr 16, 2020

View reviewed changes

Make keyboard input isFocused mutable ref instead of state

de385b4

vercel bot deployed to Preview April 17, 2020 10:08 View deployment

dmtrKovalenko mentioned this pull request Apr 17, 2020

[DatePicker] Fix inputFormat prop update logic #1672

Merged

Merge conflicts

1765ec8

vercel bot deployed to Preview April 21, 2020 09:47 View deployment

Merge conflicts

26843b3

vercel bot deployed to Preview April 21, 2020 10:11 View deployment

dmtrKovalenko merged commit b223777 into next Apr 21, 2020

dmtrKovalenko deleted the feature/better-mask-input branch April 24, 2020 09:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve input mask UX and a11y #1661

Improve input mask UX and a11y #1661

dmtrKovalenko commented Apr 15, 2020 •

edited

Loading

vercel bot commented Apr 15, 2020 •

edited

Loading

oliviertassinari left a comment

oliviertassinari Apr 15, 2020

dmtrKovalenko Apr 16, 2020

oliviertassinari Apr 16, 2020 •

edited

Loading

dmtrKovalenko Apr 17, 2020 •

edited

Loading

oliviertassinari Apr 17, 2020 •

edited

Loading

oliviertassinari Apr 15, 2020

dmtrKovalenko commented Apr 15, 2020

cypress bot commented Apr 15, 2020 •

edited

Loading

codecov bot commented Apr 16, 2020 •

edited

Loading

dmtrKovalenko Apr 16, 2020

oliviertassinari Apr 16, 2020

dmtrKovalenko Apr 17, 2020 •

edited

Loading

	}, [rawValue, utils, inputFormat]); // eslint-disable-line
	}, [rawValue, utils, inputFormat]);

	}, [value, utils]); // eslint-disable-line
	}, [value, utils]);

Improve input mask UX and a11y #1661

Improve input mask UX and a11y #1661

Conversation

dmtrKovalenko commented Apr 15, 2020 • edited Loading

Breaking changes

Features

vercel bot commented Apr 15, 2020 • edited Loading

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Apr 15, 2020

Choose a reason for hiding this comment

dmtrKovalenko Apr 16, 2020

Choose a reason for hiding this comment

oliviertassinari Apr 16, 2020 • edited Loading

Choose a reason for hiding this comment

dmtrKovalenko Apr 17, 2020 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Apr 17, 2020 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Apr 15, 2020

Choose a reason for hiding this comment

dmtrKovalenko commented Apr 15, 2020

cypress bot commented Apr 15, 2020 • edited Loading

Test summary

Run details

codecov bot commented Apr 16, 2020 • edited Loading

Codecov Report

dmtrKovalenko Apr 16, 2020

Choose a reason for hiding this comment

oliviertassinari Apr 16, 2020

Choose a reason for hiding this comment

dmtrKovalenko Apr 17, 2020 • edited Loading

Choose a reason for hiding this comment

dmtrKovalenko commented Apr 15, 2020 •

edited

Loading

vercel bot commented Apr 15, 2020 •

edited

Loading

oliviertassinari Apr 16, 2020 •

edited

Loading

dmtrKovalenko Apr 17, 2020 •

edited

Loading

oliviertassinari Apr 17, 2020 •

edited

Loading

cypress bot commented Apr 15, 2020 •

edited

Loading

codecov bot commented Apr 16, 2020 •

edited

Loading

dmtrKovalenko Apr 17, 2020 •

edited

Loading