From 4014616483344e5030a0216c348287e94a9e4a8c Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 4 Jan 2022 14:33:55 +0000 Subject: [PATCH 1/4] [InputLabel] Remove pointer-events:none property --- packages/mui-material/src/InputLabel/InputLabel.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js index 923d5c03e80852..9c408a088c0d63 100644 --- a/packages/mui-material/src/InputLabel/InputLabel.js +++ b/packages/mui-material/src/InputLabel/InputLabel.js @@ -81,7 +81,6 @@ const InputLabelRoot = styled(FormLabel, { // the input field is drawn last and hides the label with an opaque background color. // zIndex: 1 will raise the label above opaque background-colors of input. zIndex: 1, - pointerEvents: 'none', transform: 'translate(12px, 16px) scale(1)', maxWidth: 'calc(100% - 24px)', ...(ownerState.size === 'small' && { @@ -98,7 +97,6 @@ const InputLabelRoot = styled(FormLabel, { ...(ownerState.variant === 'outlined' && { // see comment above on filled.zIndex zIndex: 1, - pointerEvents: 'none', transform: 'translate(14px, 16px) scale(1)', maxWidth: 'calc(100% - 24px)', ...(ownerState.size === 'small' && { From fabcf49643dc81e5998904e4cddc9820d0dd3b25 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 6 Jan 2022 11:16:17 +0000 Subject: [PATCH 2/4] [InputLabel] Allow pointer events for shrunk labels --- packages/mui-material/src/InputLabel/InputLabel.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js index 9c408a088c0d63..6dad4ef8f2b839 100644 --- a/packages/mui-material/src/InputLabel/InputLabel.js +++ b/packages/mui-material/src/InputLabel/InputLabel.js @@ -81,12 +81,15 @@ const InputLabelRoot = styled(FormLabel, { // the input field is drawn last and hides the label with an opaque background color. // zIndex: 1 will raise the label above opaque background-colors of input. zIndex: 1, + pointerEvents: 'none', transform: 'translate(12px, 16px) scale(1)', maxWidth: 'calc(100% - 24px)', ...(ownerState.size === 'small' && { transform: 'translate(12px, 13px) scale(1)', }), ...(ownerState.shrink && { + userSelect: 'none', + pointerEvents: 'auto', transform: 'translate(12px, 7px) scale(0.75)', maxWidth: 'calc(133% - 24px)', ...(ownerState.size === 'small' && { @@ -97,12 +100,15 @@ const InputLabelRoot = styled(FormLabel, { ...(ownerState.variant === 'outlined' && { // see comment above on filled.zIndex zIndex: 1, + pointerEvents: 'none', transform: 'translate(14px, 16px) scale(1)', maxWidth: 'calc(100% - 24px)', ...(ownerState.size === 'small' && { transform: 'translate(14px, 9px) scale(1)', }), ...(ownerState.shrink && { + userSelect: 'none', + pointerEvents: 'auto', maxWidth: 'calc(133% - 24px)', transform: 'translate(14px, -9px) scale(0.75)', }), From 22911eb3d7acd0e2b533db2d1cf50099133783bc Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 6 Jan 2022 14:15:21 +0000 Subject: [PATCH 3/4] [TextField] Mention in API docs about pointer event conditional working --- docs/translations/api-docs/text-field/text-field.json | 2 +- packages/mui-material/src/TextField/TextField.d.ts | 1 + packages/mui-material/src/TextField/TextField.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/translations/api-docs/text-field/text-field.json b/docs/translations/api-docs/text-field/text-field.json index 2ee7a2ea6b1b8d..077c2d8167ca1a 100644 --- a/docs/translations/api-docs/text-field/text-field.json +++ b/docs/translations/api-docs/text-field/text-field.json @@ -12,7 +12,7 @@ "fullWidth": "If true, the input will take up the full width of its container.", "helperText": "The helper text content.", "id": "The id of the input element. Use this prop to make label and helperText accessible for screen readers.", - "InputLabelProps": "Props applied to the InputLabel element.", + "InputLabelProps": "Props applied to the InputLabel element. Pointer events like onClick are enabled if and only if shrink is true.", "inputProps": "Attributes applied to the input element.", "InputProps": "Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.", "inputRef": "Pass a ref to the input element.", diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts index 4b2f6af6633b29..1a70c8215645c2 100644 --- a/packages/mui-material/src/TextField/TextField.d.ts +++ b/packages/mui-material/src/TextField/TextField.d.ts @@ -83,6 +83,7 @@ export interface BaseTextFieldProps id?: string; /** * Props applied to the [`InputLabel`](/api/input-label/) element. + * Pointer events like `onClick` are enabled if and only if `shrink` is `true`. */ InputLabelProps?: Partial; /** diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js index ffdab8da31099c..beaf672af83c09 100644 --- a/packages/mui-material/src/TextField/TextField.js +++ b/packages/mui-material/src/TextField/TextField.js @@ -288,6 +288,7 @@ TextField.propTypes /* remove-proptypes */ = { id: PropTypes.string, /** * Props applied to the [`InputLabel`](/api/input-label/) element. + * Pointer events like `onClick` are enabled if and only if `shrink` is `true`. */ InputLabelProps: PropTypes.object, /** From ae3f9ce844bea3f4240c904106b33ff84f9047bd Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 7 Jan 2022 10:22:05 +0000 Subject: [PATCH 4/4] [TextField] Run doc script --- .../premium-themes/onepirate/modules/components/TextField.js | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js index 7c27f14bbd73c4..574fb4c5ac4e04 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js +++ b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js @@ -124,6 +124,7 @@ TextField.propTypes = { classes: PropTypes.object.isRequired, /** * Props applied to the [`InputLabel`](/api/input-label/) element. + * Pointer events like `onClick` are enabled if and only if `shrink` is `true`. */ InputLabelProps: PropTypes.object, /**