focus on description after starting time tracker, ST-254

e2e/organization.spec.ts

@@ -22,11 +22,12 @@ test('test that new manager can be invited', async ({ page }) => {
     const editorId = Math.round(Math.random() * 10000);
     await page.getByLabel('Email').fill(`new+${editorId}@editor.test`);
     await page.getByRole('button', { name: 'Manager' }).click();
-    await page.getByRole('button', { name: 'Add', exact: true }).click();
+    await Promise.all([
-    await page.reload();
+        page.getByRole('button', { name: 'Add', exact: true }).click(),
-    await expect(page.getByRole('main')).toContainText(
+        expect(page.getByRole('main')).toContainText(
-        `new+${editorId}@editor.test`
+            `new+${editorId}@editor.test`
-    );
+        ),
+    ]);
 });
 
 test('test that new employee can be invited', async ({ page }) => {
@@ -34,11 +35,12 @@ test('test that new employee can be invited', async ({ page }) => {
     const editorId = Math.round(Math.random() * 10000);
     await page.getByLabel('Email').fill(`new+${editorId}@editor.test`);
     await page.getByRole('button', { name: 'Employee' }).click();
-    await page.getByRole('button', { name: 'Add', exact: true }).click();
+    await Promise.all([
-    await page.reload();
+        page.getByRole('button', { name: 'Add', exact: true }).click(),
-    await expect(page.getByRole('main')).toContainText(
+        await expect(page.getByRole('main')).toContainText(
-        `new+${editorId}@editor.test`
+            `new+${editorId}@editor.test`
-    );
+        ),
+    ]);
 });
 
 test('test that new admin can be invited', async ({ page }) => {
@@ -46,21 +48,24 @@ test('test that new admin can be invited', async ({ page }) => {
     const adminId = Math.round(Math.random() * 10000);
     await page.getByLabel('Email').fill(`new+${adminId}@admin.test`);
     await page.getByRole('button', { name: 'Administrator' }).click();
-    await page.getByRole('button', { name: 'Add', exact: true }).click();
+    await Promise.all([
-    await page.reload();
+        page.getByRole('button', { name: 'Add', exact: true }).click(),
-    await expect(page.getByRole('main')).toContainText(
+        expect(page.getByRole('main')).toContainText(
-        `new+${adminId}@admin.test`
+            `new+${adminId}@admin.test`
-    );
+        ),
+    ]);
 });
 test('test that error shows if no role is selected', async ({ page }) => {
     await goToOrganizationSettings(page);
     const noRoleId = Math.round(Math.random() * 10000);
 
     await page.getByLabel('Email').fill(`new+${noRoleId}@norole.test`);
-    await page.getByRole('button', { name: 'Add', exact: true }).click();
+    await Promise.all([
-    await expect(page.getByRole('main')).toContainText(
+        page.getByRole('button', { name: 'Add', exact: true }).click(),
-        'The role field is required.'
+        expect(page.getByRole('main')).toContainText(
-    );
+            'The role field is required.'
+        ),
+    ]);
 });
 
 // TODO: Add Test for import

resources/js/Components/Common/DatePicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { getDayJsInstance, getLocalizedDayJs } from '@/utils/time';
 import { twMerge } from 'tailwind-merge';
 
@@ -14,6 +14,10 @@ const model = defineModel<string | null>({
 
 const tempDate = ref(getLocalizedDayJs(model.value).format('YYYY-MM-DD'));
 
+watch(model, (value) => {
+    tempDate.value = getLocalizedDayJs(value).format('YYYY-MM-DD');
+});
+
 function updateDate(event: Event) {
     const target = event.target as HTMLInputElement;
     const newValue = target.value;

resources/js/Components/CurrentSidebarTimer.vue

@@ -8,7 +8,7 @@ import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 const store = useCurrentTimeEntryStore();
 const { currentTimeEntry, now, isActive } = storeToRefs(store);
-const { onToggleButtonPress } = store;
+const { setActiveState } = store;
 
 const currentTime = computed(() => {
     if (now.value && currentTimeEntry.value.start) {
@@ -50,7 +50,7 @@ const isRunningInDifferentOrganization = computed(() => {
         </div>
         <TimeTrackerStartStop
             :active="isActive"
-            @changed="onToggleButtonPress"
+            @changed="setActiveState"
             size="base"></TimeTrackerStartStop>
     </div>
 </template>

resources/js/Components/TimeTracker.vue

@@ -5,7 +5,7 @@ import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 import { usePage } from '@inertiajs/vue3';
 import { type User } from '@/types/models';
-import { computed, onMounted, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import duration from 'dayjs/plugin/duration';
@@ -31,8 +31,8 @@ dayjs.extend(utc);
 
 const currentTimeEntryStore = useCurrentTimeEntryStore();
 const { currentTimeEntry, isActive, now } = storeToRefs(currentTimeEntryStore);
-const { startLiveTimer, stopLiveTimer, onToggleButtonPress } =
+const { startLiveTimer, stopLiveTimer, setActiveState } = currentTimeEntryStore;
-    currentTimeEntryStore;
+const currentTimeEntryDescriptionInput = ref<HTMLInputElement | null>(null);
 
 watch(isActive, () => {
     if (isActive.value) {
@@ -71,9 +71,16 @@ function updateTimeEntry() {
     }
 }
 
+function onToggleButtonPress(newState: boolean) {
+    setActiveState(newState);
+    if (newState) {
+        currentTimeEntryDescriptionInput.value?.focus();
+    }
+}
+
 function startTimerIfNotActive() {
     if (!isActive.value) {
-        onToggleButtonPress(true);
+        setActiveState(true);
     }
 }
 
@@ -116,6 +123,7 @@ function switchToTimeEntryOrganization() {
                     <input
                         placeholder="What are you working on?"
                         data-testid="time_entry_description"
+                        ref="currentTimeEntryDescriptionInput"
                         v-model="currentTimeEntry.description"
                         @keydown.enter="startTimerIfNotActive"
                         @blur="updateTimeEntry"