Fixed #1506 - Calendar with appendTo property isn't working as expected

primefaces · Aug 12, 2020 · e0341ef · e0341ef
1 parent b6b6120
commit e0341ef
Showing 1 changed file with 38 additions and 18 deletions.
diff --git a/src/components/calendar/Calendar.js b/src/components/calendar/Calendar.js
@@ -211,6 +211,7 @@ export class Calendar extends Component {
         this.onOverlayEnter = this.onOverlayEnter.bind(this);
         this.onOverlayEntered = this.onOverlayEntered.bind(this);
         this.onOverlayExit = this.onOverlayExit.bind(this);
+        this.reFocusInputField = this.reFocusInputField.bind(this);
     }
 
     componentDidMount() {
@@ -294,17 +295,24 @@ export class Calendar extends Component {
     }
 
     onInputFocus(event) {
-        event.persist();
-
-        if (this.props.showOnFocus && !this.state.overlayVisible) {
-            this.showOverlay();
+        if (this.ignoreFocusFunctionality) {
+            this.setState({ focused: true }, () => {
+                this.ignoreFocusFunctionality = false;
+            });
         }
+        else {
+            event.persist();
 
-        this.setState({ focused: true }, () => {
-            if (this.props.onFocus) {
-                this.props.onFocus(event);
+            if (this.props.showOnFocus && !this.state.overlayVisible) {
+                this.showOverlay();
             }
-        });
+
+            this.setState({ focused: true }, () => {
+                if (this.props.onFocus) {
+                    this.props.onFocus(event);
+                }
+            });
+        }
     }
 
     onInputBlur(event) {
@@ -333,12 +341,12 @@ export class Calendar extends Component {
 
             //tab
             case 9: {
-                if(this.props.touchUI) {
-                    this.disableModality();
+                if (this.state.overlayVisible) {
+                    this.trapFocus(event);
                 }
 
-                if (event.shiftKey) {
-                    this.hideOverlay();
+                if (this.props.touchUI) {
+                    this.disableModality();
                 }
                 break;
             }
@@ -376,6 +384,13 @@ export class Calendar extends Component {
         }
     }
 
+    reFocusInputField() {
+        if (!this.props.inline && this.inputElement) {
+            this.ignoreFocusFunctionality = true;
+            this.inputElement.focus();
+        }
+    }
+
     isValidSelection(value) {
         let isValid = true;
         if (this.isSingleSelection()) {
@@ -418,7 +433,7 @@ export class Calendar extends Component {
 
             //escape
             case 27:
-                this.hideOverlay();
+                this.hideOverlay(this.reFocusInputField);
                 event.preventDefault();
                 break;
 
@@ -620,7 +635,7 @@ export class Calendar extends Component {
     onClearButtonClick(event) {
         this.updateModel(event, null);
         this.updateInputfield(null);
-        this.hideOverlay();
+        this.hideOverlay(this.reFocusInputField);
 
         if (this.props.onClearButtonClick) {
             this.props.onClearButtonClick(event);
@@ -1181,7 +1196,7 @@ export class Calendar extends Component {
 
             //escape
             case 27: {
-                this.hideOverlay()
+                this.hideOverlay(this.reFocusInputField)
                 event.preventDefault();
                 break;
             }
@@ -1278,7 +1293,7 @@ export class Calendar extends Component {
 
             //escape
             case 27: {
-                this.hideOverlay();
+                this.hideOverlay(this.reFocusInputField);
                 event.preventDefault();
                 break;
             }
@@ -1432,8 +1447,13 @@ export class Calendar extends Component {
         this.setState({ overlayVisible: true });
     }
 
-    hideOverlay() {
-        this.setState({ overlayVisible: false });
+    hideOverlay(callback) {
+        this.setState({ overlayVisible: false }, () => {
+            this.ignoreFocusFunctionality = false;
+            if (callback) {
+                callback();
+            }
+        });
     }
 
     onOverlayEnter() {