[4455] Keep reference values navigable even when in read-only mode

CHANGELOG.adoc

@@ -263,7 +263,7 @@ These components could be reused by downstream applications in custom creation t
 - https://github.com/eclipse-sirius/sirius-web/issues/4333[#4333] [diagram] Improve the style of the palette by switching the positions of the search field and the quick access tools and by adding a small touch of grey in the header bar and search field
 - https://github.com/eclipse-sirius/sirius-web/issues/4286[#4286] [sirius-web] Make default explorer drag and drop work only for the default explorer.
 Downstream applications with a custom explorer that relies on `ExplorerDropTreeItemHandler` now need to provide their own `IDropTreeItemHandler` to support drag and drop in their explorer.
-
+- https://github.com/eclipse-sirius/sirius-web/issues/4455[#4455] [forms] Even when in read-only mode, the values displayed in a _Reference_ widgets are now clickable so that the user can navigate to the reference's values.
 
 == v2024.11.0
 

packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx

@@ -245,7 +245,7 @@ export const ValuedReferenceAutocomplete = ({
       disableClearable
       renderTags={(value, getTagProps) =>
         value.map((option, index) => {
-          const { key, ...tagProps } = getTagProps({ index });
+          const { key, onDelete, ...tagProps } = getTagProps({ index });
           return (
             <Chip
               key={key}
@@ -257,9 +257,11 @@ export const ValuedReferenceAutocomplete = ({
                   <IconOverlay iconURL={option.iconURL} alt={option.kind} />
                 </div>
               }
-              clickable={!readOnly && !widget.readOnly}
+              clickable
               onClick={() => optionClickHandler(option)}
               {...tagProps}
+              disabled={false}
+              onDelete={readOnly || widget.readOnly ? undefined : onDelete}
             />
           );
         })