Disable typing in datepicker (#1060)

swisstopo · Feb 28, 2024 · 233e752 · 233e752
2 parents 02f2f55 + 813345a
commit 233e752
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@
 - Renamed various codelists to have more evocative names (e.g. `location_precision` instead of `qt_location`, `plasticity` instead of `mlpr101`, …)
 - Remove stratigraphy kind.
 - Split generic join table `layer_codelists` into 6 separate join tables for each many to many relationship between layer and codelist.
+- Prevent typing dates in profile and filter, only allow selecting date in datepicker.
 
 ### Fixed
 

diff --git a/src/client/cypress/e2e/editor/bulkedit.cy.js b/src/client/cypress/e2e/editor/bulkedit.cy.js
@@ -86,7 +86,7 @@ describe("Test the borehole bulk edit feature.", () => {
         cy.wrap(el).scrollIntoView().type(`A${index}`),
       );
 
-    cy.get("form .field > .react-datepicker-wrapper input")
+    cy.get("form .field > .react-datepicker-wrapper .datepicker-input")
       .should("have.length", 3)
       .each((el, index, list) => {
         cy.wrap(el).click();

diff --git a/src/client/cypress/e2e/filter.cy.js b/src/client/cypress/e2e/filter.cy.js
@@ -151,7 +151,7 @@ describe("Search filter tests", () => {
     // input values
     cy.contains("Creation date")
       .next()
-      .find(".react-datepicker-wrapper input")
+      .find(".react-datepicker-wrapper .datepicker-input")
       .click();
 
     cy.get(".react-datepicker__year-select").select("2021");
@@ -164,7 +164,7 @@ describe("Search filter tests", () => {
       .parent()
       .parent()
       .next()
-      .find(".react-datepicker-wrapper input")
+      .find(".react-datepicker-wrapper .datepicker-input")
       .click();
 
     cy.get(".react-datepicker__year-select").select("2021");

diff --git a/src/client/src/commons/form/dateField.css b/src/client/src/commons/form/dateField.css
@@ -1,3 +1,11 @@
 .react-datepicker-popper {
   z-index: 999 !important;
 }
+
+.datepicker-input {
+  opacity: 1 !important;
+}
+
+.datepicker-input input[disabled] {
+  opacity: 1 !important;
+}
diff --git a/src/client/src/commons/form/dateField.js b/src/client/src/commons/form/dateField.js
@@ -48,11 +48,13 @@ class DateField extends React.Component {
               iconPosition="left"
               placeholder={placeholder}
               spellCheck="false"
+              className="datepicker-input"
               value={
                 moment(this.state.date).isValid()
                   ? moment(this.state.date).format("DD.MM.YYYY")
                   : ""
               }
+              disabled={true}
               readOnly={!isEditable}
             />
           </div>