added default value to task description input

src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx

@@ -18,6 +18,7 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
     const descriptionInput = useRef("")
 
     const [loading, setLoading] = useState(true)
+    const [suggestProjectName, setSuggestProjectName] = useState()
 
     let newTask = useRef("")
     const [addingNewTask, setAddingNewTask] = useState(false)
@@ -242,7 +243,10 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
                         </select>
 
                         <select
-                            onChange={(e) => changeClockifyData({taskID: e.target.value})}
+                            onChange={(e) => {
+                                setSuggestProjectName(e.target.options[e.target.selectedIndex].text)
+                                changeClockifyData({taskID: e.target.value})
+                            }}
                             className={`project-selector ${(!clockifyData.projectID || (clockifyData.tasks && clockifyData.tasks.length === 0)) && 'disabled'}`}
                         >
                             <option value="0">Select a Task</option>
@@ -296,13 +300,24 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
                             type="text"
                             ref={descriptionInput}
                             onChange={(e) => changeClockifyData({description: e.target.value})}
-                            placeholder="Add task description"
+                            placeholder={suggestProjectName ? false : "Add task description"}
-                            className={!clockifyData.projectID && 'disabled'}
+                            disabled={!clockifyData.projectID }
-                            onKeyPress={event => {
+                            className={suggestProjectName && 'suggestion-placeholder'}
+                            onKeyDown={event => {
                                 if (event.key === 'Enter') {
+                                    if (event.target.value === suggestProjectName) {
+                                        setSuggestProjectName(undefined)
+                                    }
                                     setTimerOn(true)
+                                    event.target.blur()
+                                    return
+                                }
+                                if (suggestProjectName) {
+                                    event.target.value = ''
+                                    setSuggestProjectName(undefined)
                                 }
                             }}
+                            value={suggestProjectName}
                         />
                     </div>
                 : null

src/pages/Main/ClockifyTaskForm/clockify-task-form.css

@@ -57,7 +57,11 @@
   padding: 1px 2px;
   box-sizing: border-box;
 }
-.clockify-tasks-display-container .clockify-task-form.disabled, .clockify-tasks-display-container .clockify-task-form .disabled {
+.clockify-tasks-display-container .clockify-task-form input[type=text].suggestion-placeholder {
+  color: #bbb;
+  font-weight: bold;
+}
+.clockify-tasks-display-container .clockify-task-form.disabled, .clockify-tasks-display-container .clockify-task-form .disabled, .clockify-tasks-display-container .clockify-task-form *:disabled {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;

src/pages/Main/ClockifyTaskForm/clockify-task-form.css.map

@@ -1 +1 @@
-{"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACAJ;ADGQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADIQ;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACFZ;ADKQ;EACI,WAAA;EACA,WAAA;ACHZ;ADKY;EACI,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,iBAAA;ACHhB;ADOQ;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,qCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACVZ;ADYY;EACI,uBAAA;ACVhB;ADaY;EACI,wBAAA;ACXhB;ADeQ;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACbZ;ADgBQ;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;ACjBZ;ADoBQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;AClBZ;;ADuBA;EAEI;IACI,gBAAA;IACA,WAAA;IAEA,gBAAA;ECtBN;EDwBM;IACI,aAAA;IACA,mBAAA;IACA,eAAA;IACA,8BAAA;IAEA,gBAAA;ECvBV;EDyBU;IACI,WAAA;IACA,gBAAA;IACA,WAAA;IACA,gBAAA;ECvBd;ED0BU;IACI,kBAAA;ECxBd;ED2BU;IACI,eAAA;ECzBd;ED4BU;IACI,WAAA;IACA,kBAAA;IACA,gBAAA;EC1Bd;AACF;AD+BA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EC/BN;EDiCM;IACI,UAAA;IACA,YAAA;EC/BV;EDkCM;IACI,UAAA;IACA,WAAA;IACA,eAAA;EChCV;AACF","file":"clockify-task-form.css"}
+{"version":3,"sources":["clockify-task-form.scss","clockify-task-form.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,kBAAA;EAEA,SAAA;EACA,WAAA;ACAJ;ADGQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADAQ;EACI,gCAAA;ACDZ;ADIQ;EACI,WAAA;EACA,YAAA;EACA,gBAAA;ACFZ;ADKQ;EACI,WAAA;EACA,WAAA;ACHZ;ADKY;EACI,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,iBAAA;ACHhB;ADOQ;EACI,YAAA;EACA,aAAA;EAEA,kBAAA;EAEA,eAAA;EAEA,qCAAA;EACA,mBAAA;EAEA,WAAA;EAEA,eAAA;ACVZ;ADYY;EACI,uBAAA;ACVhB;ADaY;EACI,wBAAA;ACXhB;ADeQ;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;ACbZ;ADgBQ;EACI,WAAA;EACA,WAAA;EAEA,eAAA;EAEA,aAAA;EACA,gBAAA;EAEA,sBAAA;ACjBZ;ADmBY;EACI,WAAA;EACA,iBAAA;ACjBhB;ADqBQ;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,eAAA;EACA,oBAAA;EACA,YAAA;ACnBZ;;ADwBA;EAEI;IACI,gBAAA;IACA,WAAA;IAEA,gBAAA;ECvBN;EDyBM;IACI,aAAA;IACA,mBAAA;IACA,eAAA;IACA,8BAAA;IAEA,gBAAA;ECxBV;ED0BU;IACI,WAAA;IACA,gBAAA;IACA,WAAA;IACA,gBAAA;ECxBd;ED2BU;IACI,kBAAA;ECzBd;ED4BU;IACI,eAAA;EC1Bd;ED6BU;IACI,WAAA;IACA,kBAAA;IACA,gBAAA;EC3Bd;AACF;ADgCA;EAEI;IACI,iBAAA;IACA,WAAA;IAEA,aAAA;IACA,sBAAA;IACA,mBAAA;EChCN;EDkCM;IACI,UAAA;IACA,YAAA;EChCV;EDmCM;IACI,UAAA;IACA,WAAA;IACA,eAAA;ECjCV;AACF","file":"clockify-task-form.css"}

src/pages/Main/ClockifyTaskForm/clockify-task-form.scss

@@ -68,9 +68,14 @@
             padding: 1px 2px;
 
             box-sizing: border-box;
+
+            &.suggestion-placeholder {
+                color: #bbb;
+                font-weight: bold
+            }
         }
 
-        &.disabled, .disabled {
+        &.disabled, .disabled, *:disabled {
             user-select: none;
             cursor: initial;
             pointer-events: none;