refactor(sy-datepicker): improve UX and fix tests

This reverts some changes from the past:
7a0121e
But mainly it fixes the focus handling of the input.

app/components/sy-datepicker/component.js

@@ -1,6 +1,7 @@
 import { action } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
 import { scheduleOnce } from "@ember/runloop";
+import { isTesting, macroCondition } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import moment from "moment";
@@ -29,6 +30,13 @@ export default class SyDatepicker extends Component {
       : null;
   }
 
+  @action
+  handleFocus(dd) {
+    if (macroCondition(isTesting())) {
+      dd.actions.open();
+    }
+  }
+
   @action
   handleBlur(dd, e) {
     const container = document.getElementById(
@@ -83,4 +91,11 @@ export default class SyDatepicker extends Component {
     this.args.onChange(moment);
     this.checkValidity();
   }
+
+  @action
+  clear(dd) {
+    dd.actions.close();
+
+    this.args.onChange(null);
+  }
 }

app/components/sy-datepicker/template.hbs

@@ -1,5 +1,9 @@
 <BasicDropdown @horizontalPosition="auto-right" as |DropDown|>
-  <DropDown.Trigger @tabindex="-1">
+  <DropDown.Trigger
+    @tabIndex="-1"
+    @stopPropagation={{true}}
+    class="sy-datepicker-trigger"
+  >
     <input
       autocomplete="off"
       id={{this.uniqueId}}
@@ -9,13 +13,27 @@
       pattern="\d{1,2}\.\d{1,2}\.\d{2,4}"
       value={{this.displayValue}}
       placeholder={{this.placeholder}}
+      {{on
+        "focus"
+        (prevent-default (stop-propagation (fn this.handleFocus DropDown)))
+      }}
       {{on "blur" (fn this.handleBlur DropDown)}}
       {{on "change" this.handleChange}}
       {{on "input" this.checkValidity}}
     />
+    {{#if @value}}
+      <span
+        class="clear ember-power-select-clear-btn"
+        role="button"
+        {{on
+          "click"
+          (prevent-default (stop-propagation (fn this.clear DropDown)))
+        }}
+      >×</span>
+    {{/if}}
   </DropDown.Trigger>
 
-  <DropDown.Content>
+  <DropDown.Content @class="sy-datepicker">
     <SyCalendar
       @center={{this.center}}
       @selected={{@value}}

app/styles/app.scss

@@ -30,6 +30,7 @@
 @import "components/date-navigation";
 @import "components/tracking-bar";
 @import "components/sy-calendar";
+@import "components/sy-datepicker";
 
 html {
   hyphens: auto;

app/styles/components/sy-datepicker.scss

@@ -0,0 +1,15 @@
+.sy-datepicker-trigger.ember-basic-dropdown-trigger {
+  position: relative;
+
+  span.clear {
+    cursor: pointer;
+    color: #555;
+    line-height: 1.5;
+    font-size: 0.9rem;
+    background-color: #fff;
+    padding: 0 2px;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}