feat: Style add tags widget + staged tags

Also clear search term whenever tags are staged/cancelled
openedx · Mar 3, 2024 · 440969a · 440969a
1 parent 5387893
commit 440969a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -278,7 +278,11 @@ const ContentTagsCollapsible = ({
   }, 500); // Perform search after 500ms
 
   const handleSearchChange = React.useCallback((value, { action }) => {
-    if (action === 'input-change') {
+    if (action === 'input-blur') {
+      // Cancel/clear search if focused away from select input
+      handleSearch.cancel();
+      setSearchTerm('');
+    } else if (action === 'input-change') {
       if (value === '') {
         // No need to debounce when search term cleared. Clear debounce function
         handleSearch.cancel();
@@ -311,12 +315,14 @@ const ContentTagsCollapsible = ({
     commitStagedTags();
     handleStagedTagsMenuChange([]);
     selectRef.current?.blur();
-  }, [commitStagedTags, handleStagedTagsMenuChange, selectRef]);
+    setSearchTerm('');
+  }, [commitStagedTags, handleStagedTagsMenuChange, selectRef, setSearchTerm]);
 
   const handleCancelStagedTags = React.useCallback(() => {
     handleStagedTagsMenuChange([]);
     selectRef.current?.blur();
-  }, [handleStagedTagsMenuChange, selectRef]);
+    setSearchTerm('');
+  }, [handleStagedTagsMenuChange, selectRef, setSearchTerm]);
 
   return (
     <div className="d-flex">
@@ -337,7 +343,7 @@ const ContentTagsCollapsible = ({
               placeholder={intl.formatMessage(messages.collapsibleAddTagsPlaceholderText)}
               isSearchable
               className="d-flex flex-column flex-fill"
-              classNamePrefix="react-select"
+              classNamePrefix="react-select-add-tags"
               onInputChange={handleSearchChange}
               onChange={handleStagedTagsMenuChange}
               components={{

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.scss b/src/content-tags-drawer/ContentTagsCollapsible.scss
@@ -37,3 +37,23 @@
   background-color: transparent;
   color: $gray-300 !important;
 }
+
+.react-select-add-tags__control {
+  border-radius: 0 !important;
+}
+
+.react-select-add-tags__control--is-focused {
+  border-color: black !important;
+  box-shadow: 0 0 0 1px black !important;
+}
+
+.react-select-add-tags__multi-value__remove {
+  padding-right: 7px !important;
+  padding-left: 7px !important;
+  border-radius: 0 3px 3px 0;
+
+  &:hover {
+    background-color: black !important;
+    color: white !important;
+  }
+}