diff --git a/packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx b/packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx
index df9b8eb019..c67ddeabd7 100644
--- a/packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx
+++ b/packages/cozy-viewer/src/Panel/ActionMenuWrapper.jsx
@@ -17,7 +17,10 @@ const ActionMenuWrapper = forwardRef(
const { showAlert } = useAlert()
const isEditable = isEditableAttribute(name, file) && !isReadOnly
- const editPath = `${file.metadata.qualification.label}/${file._id}/edit/information?metadata=${optionFile.name}`
+ const editPath =
+ name === 'contact'
+ ? `${file.metadata.qualification.label}/${file._id}/edit/contact`
+ : `${file.metadata.qualification.label}/${file._id}/edit/information?metadata=${optionFile.name}`
const handleCopy = async () => {
try {
diff --git a/packages/cozy-viewer/src/Panel/Qualification.jsx b/packages/cozy-viewer/src/Panel/Qualification.jsx
index b9629d43c6..18b983c7f5 100644
--- a/packages/cozy-viewer/src/Panel/Qualification.jsx
+++ b/packages/cozy-viewer/src/Panel/Qualification.jsx
@@ -120,11 +120,11 @@ const Qualification = ({ file, isPublic, isReadOnly }) => {
})}
{optionFile.name && (
)}
diff --git a/packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx b/packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx
index cb154694ce..df13bf24fa 100644
--- a/packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx
+++ b/packages/cozy-viewer/src/Panel/QualificationListItemContact.jsx
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
+import React, { forwardRef } from 'react'
import {
getTranslatedNameForContact,
@@ -15,85 +15,66 @@ import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryA
import Spinner from 'cozy-ui/transpiled/react/Spinner'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
-import ActionMenuWrapper from './ActionMenuWrapper'
import QualificationListItemText from './QualificationListItemText'
import IntentOpener from '../components/IntentOpener'
import useReferencedContactName from '../hooks/useReferencedContactName'
-const QualificationListItemContact = ({ file, isReadOnly }) => {
- const { lang } = useI18n()
- const actionBtnRef = useRef()
- const [optionFile, setOptionFile] = useState({
- name: '',
- value: ''
- })
- const { contacts, isLoadingContacts } = useReferencedContactName(file)
+const QualificationListItemContact = forwardRef(
+ ({ file, isReadOnly, toggleActionsMenu }, ref) => {
+ const { lang } = useI18n()
+ const { contacts, isLoadingContacts } = useReferencedContactName(file)
- if (isLoadingContacts) {
- return (
-
-
-
- )
- }
-
- const formattedValue = formatContactValue(contacts)
+ if (isLoadingContacts) {
+ return (
+
+
+
+ )
+ }
- if (!formattedValue) {
- return null
- }
+ const formattedValue = formatContactValue(contacts)
- const formattedTitle = getTranslatedNameForContact({ lang })
- const qualificationLabel = file.metadata.qualification.label
+ if (!formattedValue) {
+ return null
+ }
- const hideActionsMenu = () => setOptionFile({ name: '', value: '' })
- const toggleActionsMenu = (name, value) =>
- setOptionFile(prev => {
- if (prev.value) return { name: '', value: '' }
- return { name, value }
- })
+ const formattedTitle = getTranslatedNameForContact({ lang })
+ const qualificationLabel = file.metadata.qualification.label
- return (
- <>
-
-
-
-
-
-
-
- toggleActionsMenu('contact', formattedValue)}
- >
-
-
-
-
-
+ return (
+ <>
+
+
+
+
+
+
+
+ toggleActionsMenu('contact', formattedValue)}
+ >
+
+
+
+
+
+ >
+ )
+ }
+)
- {optionFile.value && (
-
- )}
- >
- )
-}
+QualificationListItemContact.displayName = 'QualificationListItemContact'
QualificationListItemContact.propTypes = {
file: PropTypes.object.isRequired,