Cannot update modal with multi static select menu with initial options from different option groups with an additional option from a different option group

[filmaj]

This is a spin out issue from a follow-up comment from @nikhiltadikonda in #1496.

Given a modal with a block containing a multi select static menu containing options from different option groups, and the menu having initial_options selected from different option groups, such as:

{
  type: 'input',
  block_id: 'interests_select_block',
  label: {
    type: 'plain_text',
    text: 'Label here',
  },
  element: {
    type: 'multi_static_select',
    action_id: 'my-action-id',
    placeholder: {
      type: 'plain_text',
      text: 'Select one or more interests...',
    },
    option_groups: [
      {
        label: {
          type: 'plain_text',
          text: 'DOMESTIC',
        },
        options: [
          {
            text: {
              text: 'Baking',
              type: 'plain_text',
            },
            value: '2',
          },
        ],
      },
      {
        label: {
          type: 'plain_text',
          text: 'OUTDOOR_RECREATION',
        },
        options: [
          {
            text: {
              text: 'Hiking',
              type: 'plain_text',
            },
            value: '1',
          },
          {
            text: {
              text: 'Cycling',
              type: 'plain_text',
            },
            value: '3',
          },
        ],
      },
      {
            label: {
              type: 'plain_text',
              text: 'INDOOR_RECREATION',
            },
            options: [
              {
                text: {
                  text: 'Board Games',
                  type: 'plain_text',
                },
                value: '4',
              },
              {
                text: {
                  text: 'Painting',
                  type: 'plain_text',
                },
                value: '5',
              },
            ],
          },
    ],
    initial_options: [
      {
        text: {
          text: 'Hiking',
          type: 'plain_text',
        },
        value: '1',
      },
      {
        text: {
          text: 'Baking',
          type: 'plain_text',
        },
        value: '2',
      },
    ],
  },
}

..if you configure a bolt app to, for example, listen on the view submissions to this view and call views.update on the view modifying the above block to add an option from a separate option group not in the initial initial_options to the initial_options, the view.update API will respond with a 200 OK, but the modal will not update the static select menu (while updating other parts of the modal if applicable).

In the above blocks, there are three option groups: domestic, indoor and outdoor recreation activities. The initial options contain an option from the domestic and indoor option groups. In the example app below, the views.update call adds an option from the outdoor recreation group, but the initial option addition does not get updated in the view.

Here is a full app reproducing the behaviour (requires adding a /post slash command to your app, and triggering the modal using this slash command):

const { App } = require('@slack/bolt');
const megaview = {
  type: 'modal',
  // View identifier
  callback_id: 'view_1',
  title: {
    type: 'plain_text',
    text: 'Modal title'
  },
  blocks: [
    {
      type: 'input',
      block_id: 'interests_select_block',
      label: {
        type: 'plain_text',
        text: 'Label here',
      },
      element: {
        type: 'multi_static_select',
        action_id: 'my-action-id',
        placeholder: {
          type: 'plain_text',
          text: 'Select one or more interests...',
        },
        option_groups: [
          {
            label: {
              type: 'plain_text',
              text: 'DOMESTIC',
            },
            options: [
              {
                text: {
                  text: 'Baking',
                  type: 'plain_text',
                },
                value: '2',
              },
            ],
          },
          {
            label: {
              type: 'plain_text',
              text: 'OUTDOOR_RECREATION',
            },
            options: [
              {
                text: {
                  text: 'Hiking',
                  type: 'plain_text',
                },
                value: '1',
              },
              {
                text: {
                  text: 'Cycling',
                  type: 'plain_text',
                },
                value: '3',
              },
            ],
          },
          {
            label: {
              type: 'plain_text',
              text: 'INDOOR_RECREATION',
            },
            options: [
              {
                text: {
                  text: 'Board Games',
                  type: 'plain_text',
                },
                value: '4',
              },
              {
                text: {
                  text: 'Painting',
                  type: 'plain_text',
                },
                value: '5',
              },
            ],
          },
        ],
        initial_options: [
          {
            text: {
              text: 'Hiking',
              type: 'plain_text',
            },
            value: '1',
          },
          {
            text: {
              text: 'Baking',
              type: 'plain_text',
            },
            value: '2',
          },
        ],
      },
    },
  ],
  submit: {
    type: 'plain_text',
    text: 'Submit'
  }
};

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  socketMode: true,
  appToken: process.env.SLACK_APP_TOKEN,
  developerMode: true,
});

app.command('/post', async ({ ack, say, body, client, logger }) => {
  console.log('post coming in');
  // Acknowledge the command request
  await ack();
  try {
    // Call views.open with the built-in client
    const result = await client.views.open({
      // Pass a valid trigger_id within 3 seconds of receiving it
      trigger_id: body.trigger_id,
      // View payload
      view: megaview
    });
  }
  catch (error) {
    console.error(error);
  }
});
app.view('view_1', async ({ ack, body, view, client, logger }) => {
  // Update the view with a new initial_options in it from a different option group
  const updatedview = { ...megaview };
  updatedview.blocks[0].element.initial_options.push({
    text: {
      text: 'Board Games',
      type: 'plain_text',
    },
    value: '4',
  });
  updatedview.title.text = 'Updated modal';
  await ack({
    response_action: 'update',
    view: updatedview
  });
});
(async () => {
  await app.start();
  console.log('⚡️ Bolt app started');
})();

Note that the title of the modal in the update call gets updated, so this issue seems to be isolated only to updating the static option group select menu's initial options.

[filmaj]

I have filed this with the Block Kit team internally, will keep y'all posted as I hear updates.

[nikhiltadikonda]

@filmaj Thank you for looking into this! I'll be waiting for an update on the fix!

[filmaj]

@nikhiltadikonda FYI, the team is working / figuring out a fix. It looks to be a client-side caching issue. One identified workaround thus far, which may work for you, is to remove the block_id of the enclosing block. That seems to force a refresh / cache bust on the client side.

As I hear more about progress on this, I will keep this issue updated.

[reesesm2000]

I get around this by just adding the date/time in milliseconds to the end of the block_id field with a : between the front and back like this
"my_block_id:1691501956868"
and then you can just split the block_id to get the original value.
This forces the client to update the state values

[github-actions]

👋 It looks like this issue has been open for 30 days with no activity. We'll mark this as stale for now, and wait 10 days for an update or for further comment before closing this issue out. If you think this issue needs to be prioritized, please comment to get the thread going again! Maintainers also review issues marked as stale on a regular basis and comment or adjust status if the issue needs to be reprioritized.

[github-actions]

As this issue has been inactive for more than one month, we will be closing it. Thank you to all the participants! If you would like to raise a related issue, please create a new issue which includes your specific details and references this issue number.