fix(search): onMouseHover selecting wrong term

- On mouse hover, it would be possible to focus an undesired search term
- Increase character length of Description of search item in Edit form
- Update Item Description view to support line breaks

src/views/search/arcadia/components/ArcResult/components/ArcResultEdit/ArcResultEditForm.tsx

@@ -25,6 +25,9 @@ export function ArcResultEditForm(props: ArcResultEditViewProps) {
   const tagsInputRef: React.MutableRefObject<any> = useRef();
   const titleInputRef: React.MutableRefObject<any> = useRef();
   const descriptionInputRef: React.MutableRefObject<any> = useRef();
+  const DescriptionInputCharacterMaxLength: number = 950;
+  const InputCharacterMaxLength: number = 200;
+  const InputCharacterMinLength: number = 4;
 
   useEffect(() => {
     titleInputRef.current.focus();
@@ -64,6 +67,8 @@ export function ArcResultEditForm(props: ArcResultEditViewProps) {
             <ArcInput
               title="Title Edit"
               type="text"
+              minLength={InputCharacterMinLength}
+              maxLength={InputCharacterMaxLength}
               defaultValue={title}
               ref={titleInputRef}
             />
@@ -73,6 +78,8 @@ export function ArcResultEditForm(props: ArcResultEditViewProps) {
             <ArcInput
               title="URL Edit"
               type="text"
+              minLength={InputCharacterMinLength}
+              maxLength={InputCharacterMaxLength}
               defaultValue={itemKey}
               ref={urlInputRef}
             />
@@ -92,8 +99,8 @@ export function ArcResultEditForm(props: ArcResultEditViewProps) {
             <ArcInput
               title="Image Edit"
               type="text"
-              min={2}
-              max={90}
+              minLength={InputCharacterMinLength}
+              maxLength={InputCharacterMaxLength}
               defaultValue={image}
               ref={imageInputRef}
             />
@@ -103,7 +110,7 @@ export function ArcResultEditForm(props: ArcResultEditViewProps) {
             <ArcInputTextArea
               title="Description Edit"
               rows={5}
-              maxLength={300}
+              maxLength={DescriptionInputCharacterMaxLength}
               defaultValue={description}
               ref={descriptionInputRef}
               autoComplete="off"

src/views/search/arcadia/styles/arcadiaStyles.ts

@@ -214,6 +214,7 @@ export const ArcResultTitle = styled.span`
 
 export const ArcResultDescription = styled.span`
   font-size: 16px;
+  white-space: break-spaces;
 `;
 
 export const ArcResultTimeStamp = styled.span`

src/views/search/components/SearchBar.tsx

@@ -91,7 +91,7 @@ export function SearchBar(props: SearchBarProps) {
       } else if (e.key === 'Enter') {
         e.preventDefault();
         setShowAutoCompleteOptions(false);
-        if (listValues.length && activeItemIndex > inactiveItemsIndex) {
+        if (listValues.length && showAutoCompleteOptions && activeItemIndex > inactiveItemsIndex) {
           addToInput(listValues[activeItemIndex].tag);
         }
         sendSearchWord();
@@ -118,7 +118,7 @@ export function SearchBar(props: SearchBarProps) {
     searchInputRef.current.focus();
   };
 
-  const takeActionOnclick = (index: number) => {
+  const takeActionOnMouseDown = () => {
     setShowAutoCompleteOptions(false);
     addToInput(listValues[activeItemIndex].tag);
     sendSearchWord();
@@ -139,7 +139,7 @@ export function SearchBar(props: SearchBarProps) {
         key={item.tag}
         ref={(e: HTMLLIElement) => (addToListItemRefs(index, e))}
         onMouseEnter={() => setActiveItemIndex(index)}
-        onMouseDown={() => takeActionOnclick(index)}
+        onMouseDown={() => takeActionOnMouseDown()}
         className={index === activeItemIndex ? 'active' : ''}
       >
         <span className="left">{item.tag}</span>