Merge pull request #263 from gdi-be/29039-delete-date-fix

Fix date deletion and improve keyword display

Author: KaiVolland

src/lib/components/Form/Field/10_PublishedField.svelte

@@ -12,9 +12,13 @@
   const { getValue } = getFormContext();
   const valueFromData = $derived(getValue<string>(KEY));
   let value = $state('');
+  let initialized = false;
 
+  // TODO: this should be replaced by deriving "value". This
+  // should be possible after svelte is updated to the latest version
+  // https://github.com/gdi-be/mde-client/pull/261
   $effect(() => {
-    if (valueFromData && !value) {
+    if (valueFromData && !initialized) {
       value = new Date(valueFromData).toISOString().split('T')[0];
     }
   });

src/lib/components/Form/Inputs/DateInput.svelte

@@ -2,8 +2,9 @@
   import type { HTMLInputAttributes } from 'svelte/elements';
   import { type FullFieldConfig, type ValidationResult } from '$lib/components/Form/FieldsConfig';
   import FieldHint from '../FieldHint.svelte';
-  import { getAccessToken } from '../../../context/TokenContext.svelte';
-  import { getHighestRole } from '../../../util';
+  import { getAccessToken } from '$lib/context/TokenContext.svelte';
+  import { getHighestRole } from '$lib/util';
+  import { onMount } from 'svelte';
 
   type InputProps = {
     value?: string;
@@ -26,9 +27,27 @@
     ...restProps
   }: InputProps = $props();
 
+  let inputElement: HTMLInputElement;
+  let isActive = $state(false);
+
   const token = $derived(getAccessToken());
   const highestRole = $derived(getHighestRole(token));
 
+  // This special handling is needed as the input[type="date"] is not automatically
+  // focused when the datepicker is opened.
+  onMount(() => {
+    const handleFocus = () => (isActive = true);
+    const handleBlur = () => (isActive = false);
+
+    inputElement.addEventListener('focus', handleFocus);
+    inputElement.addEventListener('blur', handleBlur);
+
+    return () => {
+      inputElement.removeEventListener('focus', handleFocus);
+      inputElement.removeEventListener('blur', handleBlur);
+    };
+  });
+
   let invalid = $derived.by(() => {
     if (!fieldConfig) return false;
     const { editingRoles } = fieldConfig;
@@ -42,6 +61,8 @@
 <fieldset class={['date-input', wrapperClass, invalid && 'invalid']}>
   <legend>{label}</legend>
   <input
+    class={[isActive && 'active']}
+    bind:this={inputElement}
     type="date"
     id={key}
     name={key}
@@ -78,6 +99,13 @@
       margin-top: 0.5em;
       outline-width: 0;
       align-self: flex-start;
+
+      &.active,
+      &:focus,
+      &:focus-visible {
+        border-color: var(--mdc-theme-primary);
+        outline: 1px solid var(--mdc-theme-primary);
+      }
     }
 
     .field-footer {

src/lib/components/ReadOnly/DisplayFieldSnippets.svelte

@@ -182,15 +182,13 @@
 {/snippet}
 
 {#snippet isoMetadataKeywords(value: Keywords)}
-  {#if !value?.default?.length}
-    {DEFAULT_NULL_STRING}
-  {:else}
+  {#await getAutoKeywords()}
+    {t('general.loading')}
+  {:then autoKeywords}
+    {autoKeywords.join(', ')}
+  {/await}
+  {#if value?.default?.length}
     {value?.default?.map(({ keyword }) => keyword)?.join(', ') + ','}
-    {#await getAutoKeywords()}
-      {t('general.loading')}
-    {:then autoKeywords}
-      {autoKeywords.join(', ')}
-    {/await}
   {/if}
 {/snippet}