fix

cms/version.py

@@ -1 +1 @@
-VERSION = "7.2.0"
+VERSION = "7.3.0"

frontend/src/static/js/components/BulkActionPermissionModal.tsx

@@ -110,6 +110,12 @@ export const BulkActionPermissionModal: React.FC<BulkActionPermissionModalProps>
       clearTimeout(searchTimeout);
     }
 
+    // Only search if 3 or more characters
+    if (value.trim().length < 3) {
+      setSearchResults([]);
+      return;
+    }
+
     // Set new timeout for debounced search
     const timeout = setTimeout(() => {
       searchUsers(value);
@@ -231,7 +237,7 @@ export const BulkActionPermissionModal: React.FC<BulkActionPermissionModalProps>
               <div className="search-box">
                 <input
                   type="text"
-                  placeholder={translateString('Search users to add...')}
+                  placeholder={translateString('Search users to add (min 3 characters)...')}
                   value={addSearchTerm}
                   onChange={(e) => handleAddSearchChange(e.target.value)}
                 />

frontend/src/static/js/components/list-item/Item.scss

@@ -696,6 +696,11 @@ a.item-edit-link {
     opacity: 1;
   }
 
+  // Show all checkboxes when any item has a selection
+  &.has-any-selection .item-selection-checkbox {
+    opacity: 1;
+  }
+
   // Add hover shadow when any selection is active
   &.has-any-selection:not(.selected):hover {
     .item-content {

frontend/src/static/js/components/list-item/MediaItem.jsx

@@ -27,15 +27,33 @@ export function MediaItem(props) {
     (props.isSelected ? ' selected' : '') +
     (props.hasAnySelection ? ' has-any-selection' : '');
 
+  const handleItemClick = (e) => {
+    // If there's any selection active, clicking the item should toggle selection
+    if (props.hasAnySelection && props.onCheckboxChange) {
+      // Check if clicking on the checkbox itself, edit icon, or view icon
+      if (e.target.closest('.item-selection-checkbox') ||
+          e.target.closest('.item-edit-icon') ||
+          e.target.closest('.item-view-icon')) {
+        return; // Let these elements handle their own clicks
+      }
+
+      // Prevent all other clicks and toggle selection
+      e.preventDefault();
+      e.stopPropagation();
+      props.onCheckboxChange({ target: { checked: !props.isSelected } });
+    }
+  };
+
   return (
-    <div className={finalClassname}>
+    <div className={finalClassname} onClick={handleItemClick}>
       <div className="item-content">
         {props.showSelection && (
-          <div className="item-selection-checkbox">
+          <div className="item-selection-checkbox" onClick={(e) => e.stopPropagation()}>
             <input
               type="checkbox"
               checked={props.isSelected || false}
               onChange={(e) => { props.onCheckboxChange && props.onCheckboxChange(e); }}
+              onClick={(e) => e.stopPropagation()}
               aria-label="Select media"
             />
           </div>

frontend/src/static/js/components/list-item/MediaItemAudio.jsx

@@ -70,8 +70,25 @@ export function MediaItemAudio(props) {
     (props.isSelected ? ' selected' : '') +
     (props.hasAnySelection ? ' has-any-selection' : '');
 
+  const handleItemClick = (e) => {
+    // If there's any selection active, clicking the item should toggle selection
+    if (props.hasAnySelection && props.onCheckboxChange) {
+      // Check if clicking on the checkbox itself, edit icon, or view icon
+      if (e.target.closest('.item-selection-checkbox') ||
+          e.target.closest('.item-edit-icon') ||
+          e.target.closest('.item-view-icon')) {
+        return; // Let these elements handle their own clicks
+      }
+
+      // Prevent all other clicks and toggle selection
+      e.preventDefault();
+      e.stopPropagation();
+      props.onCheckboxChange({ target: { checked: !props.isSelected } });
+    }
+  };
+
   return (
-    <div className={finalClassname}>
+    <div className={finalClassname} onClick={handleItemClick}>
       {playlistOrderNumberComponent()}
 
       <div className="item-content">

frontend/src/static/js/components/list-item/MediaItemVideo.jsx

@@ -77,8 +77,25 @@ export function MediaItemVideo(props) {
     (props.isSelected ? ' selected' : '') +
     (props.hasAnySelection ? ' has-any-selection' : '');
 
+  const handleItemClick = (e) => {
+    // If there's any selection active, clicking the item should toggle selection
+    if (props.hasAnySelection && props.onCheckboxChange) {
+      // Check if clicking on the checkbox itself, edit icon, or view icon
+      if (e.target.closest('.item-selection-checkbox') ||
+          e.target.closest('.item-edit-icon') ||
+          e.target.closest('.item-view-icon')) {
+        return; // Let these elements handle their own clicks
+      }
+
+      // Prevent all other clicks and toggle selection
+      e.preventDefault();
+      e.stopPropagation();
+      props.onCheckboxChange({ target: { checked: !props.isSelected } });
+    }
+  };
+
   return (
-    <div className={finalClassname}>
+    <div className={finalClassname} onClick={handleItemClick}>
       {playlistOrderNumberComponent()}
 
       <div className="item-content">