Fix emojipicker (#152)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.2.21
+
+### Fixed
+
+* emoji picker overlay issue (#150)
+
 ## Version 0.2.20
 
 ### Fixed

components/AddEditHabitModal.tsx

@@ -15,6 +15,7 @@ import { Zap } from 'lucide-react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Habit, SafeUser } from '@/lib/types'
 import EmojiPickerButton from './EmojiPickerButton'
+import ModalOverlay from './ModalOverlay' // Import the new component
 import { convertHumanReadableFrequencyToMachineReadable, convertMachineReadableFrequencyToHumanReadable, d2s, d2t, serializeRRule } from '@/lib/utils'
 import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, QUICK_DATES, RECURRENCE_RULE_MAP, MAX_COIN_LIMIT } from '@/lib/constants'
 import { DateTime } from 'luxon'
@@ -87,8 +88,10 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
   }
 
   return (
-    <Dialog open={true} onOpenChange={onClose}>
+    <>
-      <DialogContent>
+      <ModalOverlay />
+      <Dialog open={true} onOpenChange={onClose} modal={false}>
+        <DialogContent> {/* DialogContent from shadcn/ui is typically z-50, ModalOverlay is z-40 */}
           <DialogHeader>
             <DialogTitle>
               {habit
@@ -330,6 +333,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
           </form>
         </DialogContent>
       </Dialog>
+    </>
   )
 }
 

components/AddEditWishlistItemModal.tsx

@@ -10,6 +10,7 @@ import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { WishlistItemType } from '@/lib/types'
 import EmojiPickerButton from './EmojiPickerButton'
+import ModalOverlay from './ModalOverlay'
 import { MAX_COIN_LIMIT } from '@/lib/constants'
 
 interface AddEditWishlistItemModalProps {
@@ -115,8 +116,10 @@ export default function AddEditWishlistItemModal({
   }
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
+    <>
-      <DialogContent>
+      <ModalOverlay />
+      <Dialog open={true} onOpenChange={handleClose} modal={false}>
+        <DialogContent> {/* DialogContent from shadcn/ui is typically z-50, ModalOverlay is z-40 */}
           <DialogHeader>
             <DialogTitle>{editingItem ? t('editTitle') : t('addTitle')}</DialogTitle>
           </DialogHeader>
@@ -305,6 +308,7 @@ export default function AddEditWishlistItemModal({
           </form>
         </DialogContent>
       </Dialog>
+    </>
   )
 }
 

components/EmojiPickerButton.tsx

@@ -16,7 +16,7 @@ export default function EmojiPickerButton({ onEmojiSelect, inputIdToFocus }: Emo
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
 
   return (
-    <Popover modal={true} open={isEmojiPickerOpen} onOpenChange={setIsEmojiPickerOpen}>
+    <Popover modal={false} open={isEmojiPickerOpen} onOpenChange={setIsEmojiPickerOpen}>
       <PopoverTrigger asChild>
         <Button
           type="button"

components/ModalOverlay.tsx

@@ -0,0 +1,9 @@
+/**
+ * ModalOverlay provides a dimming effect for non-modal dialogs or popovers
+ * that need to appear modal (e.g., to prevent interaction with background elements).
+ * It should be rendered alongside the dialog/popover it's intended to overlay for.
+ * Ensure the dialog/popover has a z-index higher than this overlay (default z-40).
+ */
+export default function ModalOverlay() {
+  return <div className="fixed inset-0 z-50 bg-black/80" />
+}

components/WishlistManager.tsx

@@ -152,6 +152,7 @@ export default function WishlistManager() {
           </>
         )}
       </div>
+      {isModalOpen &&
         <AddEditWishlistItemModal
           isOpen={isModalOpen}
           setIsOpen={setIsModalOpen}
@@ -160,6 +161,7 @@ export default function WishlistManager() {
           addWishlistItem={addWishlistItem}
           editWishlistItem={editWishlistItem}
         />
+      }
       <ConfirmDialog
         isOpen={deleteConfirmation.isOpen}
         onClose={() => setDeleteConfirmation({ isOpen: false, itemId: null })}