[REACT] finishEditing and completeEdit Not working

[noqx]

Hello, This is the file

[alex.l]

Hi,

You set value in promise, but called blur before setValue resolved. This is the problem. Try to comment blur call and see all worked as expected. You need to improve the logic of your component.

[noqx]

Hi,

You set value in promise, but called blur before setValue resolved. This is the problem. Try to comment blur call and see all worked as expected. You need to improve the logic of your component.

The onDataChange still dont call after removing the promise
I changed the setValue and removed the promise

  setValue(value) {
    return this.setState({ value });
  }

onClick

onClick={(e) => {
                this.setValue(color);
                e.currentTarget.blur();
              }}

, can you try in your environment?
Thank you Alex

[tasnim]

Hi,

You'd need to wait for the setValue operation to finish as it is returning a promise.

So your onClick method should be like this

              onClick={async (e) => {
                await this.setValue(color);
                e.target.blur();
              }}

And your data change event should be triggered now.

[noqx]

Thank you tasnim it worked on the sample, Now im implementing it on our application

import React, { forwardRef, useImperativeHandle, useState } from 'react'

import { getEmojiIcon } from '~/components/IconMenu/IconMenu'
import { useAppSelector } from '~/hooks/appSelector'
import { i18n } from '~/i18n/config'
import { Option } from '~/interface/Option'
import { ActionStatus } from '~/lambdas/common/constants'
import { selectTeams } from '~/store/feature/Teams'
import { RENDER_TYPES } from '.'

const inProgressLabel = i18n.t(ActionStatus.IN_PROGRESS, { ns: 'Action' })
const stuckLabel = i18n.t(ActionStatus.STUCK, { ns: 'Action' })
const doneLabel = i18n.t(ActionStatus.DONE, { ns: 'Action' })
const ideaLabel = i18n.t(ActionStatus.IDEA, { ns: 'Action' })
const planned = i18n.t(ActionStatus.PLANNED, { ns: 'Action' })
const parked = i18n.t(ActionStatus.PARKED, { ns: 'Action' })

interface MenuItemProps {
  children: React.ReactNode
  onClick?: (e: React.MouseEvent) => void
  color?: string
  hasToolTip: boolean
}

export interface OptionProp extends Option {
  color?: string
  icon?: string
}

interface StatusSelectorProps {
  value: string
  options: OptionProp[]
  type: string
}

export const StatusOptions: OptionProp[] = [
  {
    label: '',
    value: '',
    color: 'bg-pale-purple text-center'
  },
  {
    label: ideaLabel,
    value: ActionStatus.IDEA,
    color: 'bg-saturated-purple hover:bg-saturated-purple text-white rounded-lg text-center'
  },
  {
    label: parked,
    value: ActionStatus.PARKED,
    color: ' bg-pink-400 hover:bg-pink-400 text-white rounded-lg text-center'
  },
  {
    label: planned,
    value: ActionStatus.PLANNED,
    color: 'bg-blue-700 hover:!bg-blue-700 text-white rounded-lg text-center'
  },
  {
    label: inProgressLabel,
    value: ActionStatus.IN_PROGRESS,
    color: 'bg-status-inprogress hover:bg-status-inprogress text-white rounded-lg text-center'
  },
  {
    label: stuckLabel,
    value: ActionStatus.STUCK,
    color: 'bg-status-stuck hover:bg-status-stuck text-white rounded-lg text-center'
  },
  {
    label: doneLabel,
    value: ActionStatus.DONE,
    color: 'bg-status-done hover:bg-status-done text-white rounded-lg text-center'
  }
]

export const MenuItem = ({ children, onClick, color, hasToolTip }: MenuItemProps) => {
  return (
    <div className="group relative flex mt-1">
      <button
        data-testid="connect-menu-item"
        className={`py-2 flex-1 rounded-sm mx-1 overflow-hidden text-ellipsis cursor-pointer hover:bg-pale-purple ${color}`}
        onClick={onClick ? (e) => onClick(e) : () => null}>
        {children}
      </button>
      {hasToolTip && (
        <div className="hidden whitespace-nowrap group-hover:block absolute top-12 left-10 p-2 bg-white text-black rounded-md z-10 shadow-cards">
          {children}
        </div>
      )}
    </div>
  )
}

// eslint-disable-next-line react/display-name
export default forwardRef((props: StatusSelectorProps, ref) => {
  const { teamOptions } = useAppSelector(selectTeams)

  const getOptions = () => {
    return props.type === RENDER_TYPES.OWNINGTEAM ? teamOptions : props.options || []
  }

  const [options] = useState<OptionProp[]>(getOptions())
  const selectedStatus = options?.find(({ value: optionValue }) => optionValue === props.value)
  const [value, setValue] = useState(selectedStatus)

  useImperativeHandle(ref, () => {
    return {
      getValue() {
        return value?.value || ''
      },
      setValue: (newValue) => {
        return new Promise((resolve) => {
          setValue(newValue)
          resolve(newValue)
        })
      },
      isValid: () => true,
      focus: () => {
        return false
      }
    }
  })

  const handleChangeStatus = async (e, newData: OptionProp) => {
    await ref.current?.setValue(newData)
    e.target.blur()
  }

  return (
    <div className="bg-white z-50 w-44 mood py-[1px]">
      {options.map((d) => (
        <MenuItem
          key={d.value}
          hasToolTip={d.label.split('').length > 19}
          color={d.color}
          onClick={(e) => {
            handleChangeStatus(e, d)
          }}>
          <div className="flex flex-row items-center pl-2">
            {d?.icon ? <div className="mr-1 ">{getEmojiIcon(d?.icon)}</div> : ''}
            <div className="flex-1  whitespace-nowrap">{d?.label || <>&nbsp;</>}</div>
          </div>
        </MenuItem>
      ))}
    </div>
  )
})

It doesnt trigger the close

[tasnim]

Hi,

Could you please share a runnable test case (which we can run with npm i && npm start) for it here? It's hard to say what's wrong without debugging it.

[noqx]

@tasnim , I sent you a pm

[tasnim]

Hi,

Sorry for late reply. I replied to your PM, please check