lib: append Datepicker to document.body

In dialogs a datepicker can be cut off, so instead of appending it to the parent (the dialog) append it to document.body.
cockpit-project · Oct 19, 2022 · e4b396e · e4b396e
1 parent e345a2f
commit e4b396e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/pkg/lib/cockpit-components-shutdown.jsx b/pkg/lib/cockpit-components-shutdown.jsx
@@ -217,7 +217,8 @@ export class ShutdownModal extends React.Component {
                                                 onChange={(d, ds) => this.updateDate(d, ds)}
                                                 placeholder={timeformat.dateShortFormat()}
                                                 validators={[this.dateRangeValidator]}
-                                                value={this.state.date} />
+                                                value={this.state.date}
+                                                appendTo={() => document.body} />
                                     <TimePicker time={this.state.time} is24Hour
                                                 className='shutdown-time-picker'
                                                 id="shutdown-time"

diff --git a/pkg/lib/serverTime.js b/pkg/lib/serverTime.js
@@ -531,7 +531,8 @@ function ChangeSystimeBody({ state, errors, change }) {
                                         weekStart={timeformat.firstDayOfWeek()}
                                         placeholder={timeformat.dateShortFormat()}
                                         onChange={d => change("manual_date", d)}
-                                        value={manual_date} />
+                                        value={manual_date}
+                                        appendTo={() => document.body} />
                         </ValidatedInput>
                         <ValidatedInput errors={errors} error_key="manual_time">
                             <TimePicker id="systime-time-input"