Cannot add select as grid edit template

[wnvko]

Description

I want to add a select as grid cell edit template.

Steps to reproduce

Add a select as grid edit template. I am trying with code like this:

const selectInlineEditorTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
  return (
    <>
      <IgrSelect
        value={ctx.dataContext.cell.editValue}
        change={(_s: IgrDropdown, e: IgrDropdownItemComponentEventArgs) => ctx.dataContext.cell.editValue = e.detail.value}>
        {people!.map((item, i) => (
          <>
            <IgrSelectItem
              value={item.last_name} jey={i}>
                {item.last_name}
              </IgrSelectItem>
          </>
        ))}
      </IgrSelect>
    </>
  )
}

<IgrGrid data={people} primaryKey="id" rowEditable="true" autoGenerate="false">
  <IgrColumn field="last_name" dataType="string" inlineEditorTemplate={selectInlineEditorTemplate}></IgrColumn>
</IgrGrid>

Result

Unhandled exception is thrown once the cell with edit template enters edit mode:

Unexpected Application Error! Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Expected result

Select should be able to edit gird's cell when used as grid edit template.

[MayaKirova]

Element type is invalid probably means you haven't registered the IgrSelect module. However there's no sample attached so I cannot confirm it.

Otherwise the scenario sounds related to https://github.com/IgniteUI/igniteui-angular/issues/14020

[wnvko]

Modules are registered in the application. Here is a GitHub repo with the React app - note it is under mvenkov/add-react branch. And yes this could be related to the angular issue pointed above, but still to crash the entire application for this looks not good.

[MayaKirova]

@wnvko Thanks for the sample.

The issue seems to be with the select item content. It does not allow setting direct text as child, so this:

<IgrSelectItem value="Orange">Orange</IgrSelectItem>

Would throw an error.

It expects the child to be an element of some sort and to have a key, for example:

<IgrSelectItem value="Orange"><span key="Orange">Orange</span></IgrSelectItem>

You can refer to the select docs for react: https://www.infragistics.com/products/ignite-ui-react/react/components/inputs/select We also have a similar sample with a select as inline template you can refer to here: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/cell-editing#cell-editing-templates

[wnvko]

Adding span around the item value solves the issue. I was looking exactly at the sample you mentioned and there is no span in the item there. Closing this issue now.