Table Inline Edit Multiselect

[verbeckii]

Hello community

I'm trying to implement Table inline Edit where my cell is multi-select component and I am stuck there
I'm following this demo where but there is singe Select and it works well
Guess maybe anyone here can help me and share a workout solution

My code is here:

  {
    id: 'Stores',
    header: Stores,
    cell: (e) => {
      return e?.stores?.map((el) => el.Description).join(', '); // it's need for shown all stores in table cell
    },
    width: 200,
    sortingField: 'Stores',
    editConfig: {
      ariaLabel: 'Stores',
      editIconAriaLabel: 'editable',
      errorIconAriaLabel: 'Stores Error',
      editingCell: (item, { setValue, currentValue }) => {
        return (
    <Multiselect
      autoFocus={true}
      expandToViewport={true}
      keepOpen // seems it doesn't work. after selecting any item all lists immediately closet
      hideTokens // enable it because tokens look very bad in a table cell
      onChange={(event) => {
        setValue(event.detail.selectedOptions.value);
      }}
      options={options}
      placeholder={item?.stores?.map((el) => el.Description).join(', ')}
      />
        );
      },
    },
  },

[connorlanigan]

Hi,
could you describe what issue exactly you're encountering? It is hard to tell from just "I am stuck there". What do you expect to happen, and what happens instead? It will also be useful if you can share the whole code, i.e. the parent component that contains the <Table ... element.

[verbeckii]

thanks for your answer

here is codesandbox my code
Please look at the table, there are Type and Stores columns where Type is a single Select by cloudscape demo and Stores is my Multiselect trying implementation
I don't know how to achieve a working code:

1. if you try to edit the Type column you can confirm that after selecting any item from a select list you will be still in Inline Edit mode (there are no lost cancel and confirm buttons) but do the same with my Stores column looks like something trigger cancel event (after selecting any item in my Multiselect list there are lost of cancel and confirm buttons without saving changing anywhere)

I'm stuck on how I can catch newly selected values

[connorlanigan]

The Multiselect in your example closes when it is clicked, because the property expandToViewport is enabled. This property causes the Multiselect's dropdown to be rendered outside of its normal position in the DOM. From the perspective of the Table component, clicking that dropdown is then treated the same as clicking anywhere else on the page, which closes the dropdown. We recommend not to enable the expandToViewport if it's not needed in your application. From a quick check, it seems like your example works correctly when I remove the expandToViewport property.

[verbeckii]

@connorlanigan
thanks for your answer
disabling expandToViewport solved my problem
but there was one reason why I turned on it

in my app with expantToViewport=true I see the perfect opened Multiselet list like this:

But with expantToViewport=false it looks like here:

I'm trying to reproduce this on my initial sandbox but I can't. In sandbox it works well

[verbeckii]

I'm back on this bug and found the way to reproduce it on sandbox
So if the table has not many raws, for my example, only one, then Multiselect will not fully render:

@connorlanigan can you please check and confirm that it is a bug or it is okay and whether there is a way to correct use Multiselect with Inline Edit ?

[pan-kot]

Hi,

We can confirm the bug and are now working on the mitigation.

[verbeckii]

Hi,

Thank you for your response, let's wait fix

[pan-kot]

I created an issue for tracking: #1257. Once the issue is resolved I will post an update in there.

Closing the discussion now.

Thank you once more for reporting the issue with great level of detail!