React/Material ListWithDetail should support "labelRef" option

[cons0l3]

Describe the bug

The layout ListWithDetail of the React-Material renderer does not honor the options.labelRef.

Expected behavior

When using the options.labelRef the list of items need to be rendered with that labelRef and not the first field of the schema as shown in the examples here (list-with-details.ts)

Steps to reproduce the issue

with a schema.json

      "beneficaries": {
         "title": "Beneficaries",
         "type": "array",
         "items": {
            "$ref": "#/definitions/Company"
         }
      }
...
      "Company": {
         "title": "Company",
         "type": "object",
         "properties": {
            "partner_id": {
               "title": "Partner Id",
               "type": "string",
               "format": "uuid"
            },
            "name": {
               "title": "Name",
               "type": "string"
            },
            "postal_address": {
               "$ref": "#/definitions/Address"
            }
         },
[...]

when defining a uischema.json with

{
          "type": "ListWithDetail",
          "scope": "#/properties/beneficaries",
          "options": {
            "labelRef": "#/properties/name",
            "detail": {
              "type": "VerticalLayout",
              "elements": [
                { "type": "HorizontalLayout", 
                  "elements":[
                    { "type": "Control", "scope": "#/properties/name" },
...

When inspecting the MaterialListWithDetailRenderer.tsx and the ListWithDetailMasterItem.tsx, I could not quite find out where the labelRef option comes into play.

Screenshots

No response

In which browser are you experiencing the issue?

all browsers

Framework

React

RendererSet

Material

Additional context

"dependencies": { "@jsonforms/core": "^2.5.1", "@jsonforms/material-renderers": "^2.5.1", "@jsonforms/react": "^2.5.1", "@material-ui/core": "^4.11.2", "@material-ui/icons": "^4.11.2", ... }

[sdirix]

Hi @cons0l3, the labelRef option is currently only supported in the Angular Material master-detail component. It needs to be implemented separately for the React Material renderers.

[cons0l3]

Hi Stefan (@sdirix), thanks for your reply. Like with every newly found open source project I had to figure out how the inner things work and everything is setup. I think the ListWithDetail React/Material-Component needs some love urgently, as it has a lot of cross dependencies back and forth and uses a different react and typescript programming style then most of the rest... I might even attempt a PR ;-), but cannot garantuee it, as paid work consume a lot of time lately :-( Cheers Carsten