Skip to content

Fix DatePicker re-rendering due to focus behavior change #6308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
micahgodbolt merged 2 commits into from
Sep 11, 2018
Merged

Fix DatePicker re-rendering due to focus behavior change #6308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2fa549
Revert "Fixes a bug where the DatePicker would only open every other …
KevinTCoughlin Sep 10, 2018
8b2c117
+ changefile
KevinTCoughlin Sep 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/keco-datepicker-focus_2018-09-10-22-02.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Revert removal of should render DatePicker guard given focus changes with Layer changes.",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
11 changes: 10 additions & 1 deletion packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,13 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
private _calendar = createRef<ICalendar>();
private _datePickerDiv = createRef<HTMLDivElement>();
private _textField = createRef<ITextField>();
private _preventFocusOpeningPicker: boolean;

constructor(props: IDatePickerProps) {
super(props);
this.state = this._getDefaultState();

this._preventFocusOpeningPicker = false;
}

public componentWillReceiveProps(nextProps: IDatePickerProps): void {
Expand Down Expand Up @@ -291,7 +294,11 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
}

if (!this.props.allowTextInput) {
this._showDatePickerPopup();
if (!this._preventFocusOpeningPicker) {
this._showDatePickerPopup();
} else {
this._preventFocusOpeningPicker = false;
}
}
};

Expand Down Expand Up @@ -361,6 +368,7 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS

private _showDatePickerPopup(): void {
if (!this.state.isDatePickerShown) {
this._preventFocusOpeningPicker = true;
this.setState({
isDatePickerShown: true,
errorMessage: ''
Expand All @@ -382,6 +390,7 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
* Callback for closing the calendar callout
*/
private _calendarDismissed = (): void => {
this._preventFocusOpeningPicker = true;
this._dismissDatePickerPopup();
// don't need to focus the text box, if necessary the focusTrapZone will do it
};
Expand Down