Skip to content

Commit

Permalink
Fix to DateInput with enableTextInput: false (#3461)
Browse files Browse the repository at this point in the history
+ Ensure calendar picker shows when clicked as intended.
+ Fixes breaking change in Chrome v116
+ Fixes #3460 - see ticket for additional details on the Chrome change.
+ Add className to click handler wrapper div - no functional effect, just wanted to better document why it's there, help clarify when inspecting markup
  • Loading branch information
amcclain authored Aug 23, 2023
1 parent a6eff3d commit b01cf45
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 0 deletions.
6 changes: 6 additions & 0 deletions desktop/cmp/input/DateInput.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,10 @@
background-color: transparent !important;
cursor: not-allowed;
}

// Prevent browser from capturing click events when input is disabled due to use of
// enableTextInput: false prop. See https://github.com/xh/hoist-react/issues/3460
input[disabled] {
pointer-events: none;
}
}
1 change: 1 addition & 0 deletions desktop/cmp/input/DateInput.ts
Original file line number Diff line number Diff line change
Expand Up @@ -485,6 +485,7 @@ const cmp = hoistCmp.factory<DateInputModel>(({model, className, ...props}, ref)
ref: model.textInputRef,
...getLayoutProps(props)
}),
className: 'xh-date-input__click-target',
onClick: !enableTextInput && !disabled ? model.onOpenPopoverClick : null
})
}),
Expand Down

0 comments on commit b01cf45

Please sign in to comment.