fix autocomplete in addtaskmodal not displaying
This commit is contained in:
@@ -22,6 +22,8 @@ export const Z_INDEX = {
|
|||||||
MODAL_BACKDROP: 2000,
|
MODAL_BACKDROP: 2000,
|
||||||
MODAL_CONTENT: 2001,
|
MODAL_CONTENT: 2001,
|
||||||
MODAL_CLOSE_BUTTON: 2002,
|
MODAL_CLOSE_BUTTON: 2002,
|
||||||
|
// Popups that must float above open modals (portaled to document.body)
|
||||||
|
MODAL_POPOVER: 2100,
|
||||||
TOAST: 3000,
|
TOAST: 3000,
|
||||||
|
|
||||||
// Critical System UI (9000-9999)
|
// Critical System UI (9000-9999)
|
||||||
|
|||||||
@@ -3,14 +3,16 @@ import { Add } from '@mui/icons-material'
|
|||||||
import { Divider, Menu, MenuItem } from '@mui/joy'
|
import { Divider, Menu, MenuItem } from '@mui/joy'
|
||||||
import React, { useEffect } from 'react'
|
import React, { useEffect } from 'react'
|
||||||
|
|
||||||
|
import { Z_INDEX } from '../../constants/zIndex'
|
||||||
|
|
||||||
const AutocompleteDropdown = ({
|
const AutocompleteDropdown = ({
|
||||||
currentValue,
|
currentValue,
|
||||||
suggestions,
|
|
||||||
selectedIndex,
|
|
||||||
onSelectSuggestion,
|
|
||||||
onMouseEnterSuggestion, // Added for hover selection
|
|
||||||
onCreateSuggestion, // Called when the "Create new" row is chosen
|
onCreateSuggestion, // Called when the "Create new" row is chosen
|
||||||
|
onMouseEnterSuggestion, // Added for hover selection
|
||||||
|
onSelectSuggestion,
|
||||||
parentRefer, // Ref to the dropdown element
|
parentRefer, // Ref to the dropdown element
|
||||||
|
selectedIndex,
|
||||||
|
suggestions,
|
||||||
}) => {
|
}) => {
|
||||||
// Scroll selected item into view
|
// Scroll selected item into view
|
||||||
const dropdownMenuRef = React.useRef(null)
|
const dropdownMenuRef = React.useRef(null)
|
||||||
@@ -60,7 +62,7 @@ const AutocompleteDropdown = ({
|
|||||||
position: 'relative',
|
position: 'relative',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
zIndex: 1300,
|
zIndex: Z_INDEX.MODAL_POPOVER,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{filteredOptions.map((option, index) => (
|
{filteredOptions.map((option, index) => (
|
||||||
|
|||||||
@@ -89,17 +89,14 @@ const SmartTaskTitleInput = ({
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
const handleSuggestionChange = text => {
|
const handleSuggestionChange = text => {
|
||||||
// if the last word start with '@' or '#' or 'P':
|
// show the menu when the last word starts with a configured trigger
|
||||||
const lastWord = text.split(' ').pop()
|
// character (e.g. '@', '#', '!', '*')
|
||||||
if (
|
const lastWord = text.split(/\s+/).pop()
|
||||||
lastWord.startsWith('@') ||
|
if (lastWord && suggestions?.[lastWord[0]]) {
|
||||||
lastWord.startsWith('#') ||
|
|
||||||
lastWord.startsWith('!')
|
|
||||||
) {
|
|
||||||
setSuggestionTrigger(lastWord[0])
|
setSuggestionTrigger(lastWord[0])
|
||||||
// last word without the first character:
|
// last word without the first character:
|
||||||
setLastWord(lastWord.slice(1))
|
setLastWord(lastWord.slice(1))
|
||||||
|
setSelectedSuggestionIndex(0)
|
||||||
setShowSuggestions(true)
|
setShowSuggestions(true)
|
||||||
} else {
|
} else {
|
||||||
setShowSuggestions(false)
|
setShowSuggestions(false)
|
||||||
|
|||||||
Reference in New Issue
Block a user