From e95c98391c9767dc47a7b4daff64846e925c9c4d Mon Sep 17 00:00:00 2001
From: Rainer Simon <aboutgeo@gmail.com>
Date: Mon, 13 Sep 2021 18:13:35 +0200
Subject: [PATCH] Adds support for tagging vocab terms with label + uri

---
 src/editor/widgets/Autocomplete.jsx  | 22 +++++++++++++++-------
 src/editor/widgets/tag/TagWidget.jsx |  5 ++++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/editor/widgets/Autocomplete.jsx b/src/editor/widgets/Autocomplete.jsx
index 58b835f..c17f419 100644
--- a/src/editor/widgets/Autocomplete.jsx
+++ b/src/editor/widgets/Autocomplete.jsx
@@ -18,7 +18,9 @@ const Autocomplete = props => {
   const onInputValueChange = ({ inputValue }) => {
     if (inputValue.length > 0) {
       const prefixMatches = props.vocabulary.filter(item => {
-        return item.toLowerCase().startsWith(inputValue.toLowerCase());
+        // Item could be string or { label, uri } tuple
+        const label = item.label ? item.label : item;
+        return label.toLowerCase().startsWith(inputValue.toLowerCase());
       });
 
       setInputItems(prefixMatches);
@@ -39,15 +41,16 @@ const Autocomplete = props => {
   } = useCombobox({ 
     items: inputItems, 
     onInputValueChange: onInputValueChange, 
-    onSelectedItemChange: ({ inputValue }) => {
-      onSubmit(inputValue);
-      setInputValue('');
+    onSelectedItemChange: ({ selectedItem }) => {
+      onSubmit(selectedItem);
     } 
   });
 
   const onSubmit = inputValue => {
     setInputValue('');
-    if (inputValue.trim().length > 0)
+
+    const label = inputValue.label ? inputValue.label : inputValue;
+    if (label.trim().length > 0)
       props.onSubmit(inputValue);
   }
 
@@ -65,11 +68,16 @@ const Autocomplete = props => {
     }
   }
 
+  // This is a horrible hack - need to get rid of downshift altogether!
+  const inputProps = getInputProps({ onKeyUp });
+  if (inputProps.value === '[object Object]')
+    inputProps.value = '';
+
   return (
     <div className="r6o-autocomplete" ref={element}>
       <div {...getComboboxProps()}>
         <input 
-          {...getInputProps({ onKeyUp })}
+          {...inputProps}
           placeholder={props.placeholder} />
       </div>
       <ul {...getMenuProps()}>
@@ -81,7 +89,7 @@ const Autocomplete = props => {
               }
               key={`${item}${index}`}
               {...getItemProps({ item, index })}>
-            {item}
+            {item.label ? item.label : item}
           </li>
         ))}
       </ul>
diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx
index e429c90..58dd746 100644
--- a/src/editor/widgets/tag/TagWidget.jsx
+++ b/src/editor/widgets/tag/TagWidget.jsx
@@ -50,7 +50,10 @@ const TagWidget = props => {
   }
 
   const onSubmit = tag => {
-    const { draft, ...toSubmit } =  { ...draftTag, value: tag }; 
+    const { draft, ...toSubmit } = tag.label ? 
+      { ...draftTag, value: tag.label, source: tag.uri } :
+      { ...draftTag, value: tag }; 
+
     if (draftTag.value.trim().length === 0) {
       props.onAppendBody(toSubmit);
     } else {