fix: clear input on apply

Author: AbhishekA1509

src/Shared/Components/Plugin/PluginCard.tsx

@@ -69,11 +69,16 @@ const PluginCard = ({
 
                             {docLink && (
                                 <div className="flexbox dc__gap-4 dc__visible-hover--child dc__align-items-center">
-                                    <a href={docLink} className="anchor" target="_blank" rel="noopener noreferrer">
+                                    <a
+                                        href={docLink}
+                                        className="anchor fs-12 fw-6 lh-20"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
                                         Learn more
                                     </a>
 
-                                    <ICBookOpen className="icon-dim-12 dc__no-shrink" />
+                                    <ICBookOpen className="icon-dim-12 dc__no-shrink scb-5" />
                                 </div>
                             )}
                         </div>

src/Shared/Components/Plugin/PluginTagSelect.tsx

@@ -91,7 +91,7 @@ const PluginTagSelect = ({
             controlShouldRenderValue={false}
             hideSelectedOptions={false}
             blurInputOnSelect={false}
-            maxMenuHeight={250}
+            maxMenuHeight={200}
             placeholder="Select tags"
             inputId="plugin-tag-select"
             className="w-150"

src/Shared/Components/ReactSelect/utils.tsx

@@ -192,23 +192,33 @@ export const commonSelectStyles = getCommonSelectStyle()
 export const MenuListWithApplyButton = ({
     handleApplyFilter,
     ...props
-}: MenuListProps & { handleApplyFilter: () => void }) => (
-    <>
-        <components.MenuList {...props} />
-        {props.selectProps.options.length > 0 && (
-            <div className="p-8 dc__position-sticky dc__bottom-0 dc__border-top-n1 bcn-0 dc__bottom-radius-4">
-                <button
-                    type="button"
-                    className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
-                    onClick={handleApplyFilter}
-                    aria-label="Apply filters"
-                >
-                    Apply
-                </button>
-            </div>
-        )}
-    </>
-)
+}: MenuListProps & { handleApplyFilter: () => void }) => {
+    const handleApplyClick = () => {
+        props.selectProps.onInputChange('', {
+            action: 'set-value',
+            prevInputValue: props.selectProps.inputValue,
+        })
+        handleApplyFilter()
+    }
+
+    return (
+        <>
+            <components.MenuList {...props} />
+            {props.selectProps.options.length > 0 && (
+                <div className="p-8 dc__position-sticky dc__bottom-0 dc__border-top-n1 bcn-0 dc__bottom-radius-4">
+                    <button
+                        type="button"
+                        className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
+                        onClick={handleApplyClick}
+                        aria-label="Apply filters"
+                    >
+                        Apply
+                    </button>
+                </div>
+            )}
+        </>
+    )
+}
 
 export const MultiSelectValueContainer = ({
     title,