Editing a reply's message components resends an interaction, how do I stop it? - discord

Question

I have made a bot command that
replies with a select menu
waits for the selection to be made
edits the reply to have a buttons instead of the select menu
waits for a button to be pressed
edits the reply again
It works, however, whenever I edit a reply's message components like that, immediately after the edit, the bot receives a new interaction, that does not go anywhere.
The result is that the new component will act like it was pressed, giving me the loading symbol, until the interaction has failed. Then the component works fine, just the red "The application did not respond" text remains.
This is of course fairly annoying and also confusing and ugly for the user. So I'm hoping someone can tell me whether I can do anything about it, and if so what exactly.
Here's is a very simple example command that demonstrates this behaviour:
client.on('interactionCreate', async interaction => {
console.log('interaction received');
const { commandName } = interaction;
if (commandName === 'test') {
const select = new MessageActionRow().addComponents(
new MessageSelectMenu().setCustomId('select').setPlaceholder(`Select a match to tip on.`)
.addOptions([ {label: `select me`, value: `testValue`} ])
)
await interaction.reply({ content: 'Please make a selection', components: [select], ephemeral: true });
const collectedSelect = await interaction.channel?.awaitMessageComponent({ componentType: 'SELECT_MENU'})
console.log(collectedSelect.values[0]);
const button = new MessageActionRow().addComponents(
new MessageButton().setCustomId(`button`).setLabel('push me').setStyle('PRIMARY')
)
await interaction.editReply({ content: 'Thanks for making a selection. Now, please push the button.', components: [button], ephemeral: true });
const collectedButton = await interaction.channel?.awaitMessageComponent({ componentType: 'BUTTON'})
console.log(collectedButton.customId);
return interaction.editReply({ content: 'Thanks for pushing the button.', components: [], ephemeral: true });
}
}

Answer 1

Oh, well. I was looking for something else and found this little guy that solves my problem: update()
It just needs to be run on the interaction collected with .awaitMessageComponent(), not the original interaction (like in my op).
It looks like this then:
const select = new MessageActionRow().addComponents(
new MessageSelectMenu().setCustomId('select').setPlaceholder(`Select a match to tip on.`)
.addOptions([ {label: `select me`, value: `testValue`} ])
)
await interaction.reply({ content: 'Please make a selection', components: [select], ephemeral: true });
const collectedSelect = await interaction.channel?.awaitMessageComponent({ componentType: 'SELECT_MENU'})
console.log(collectedSelect.values[0]);
const button = new MessageActionRow().addComponents(
new MessageButton().setCustomId(`button`).setLabel('push me').setStyle('PRIMARY')
)
await collectedSelect.update({ content: 'Thanks for making a selection. Now, please push the button.', components: [button], ephemeral: true });
const collectedButton = await interaction.channel?.awaitMessageComponent({ componentType: 'BUTTON'})
console.log(collectedButton.customId);
return collectedButton.update({ content: 'Thanks for pushing the button.', components: [], ephemeral: true });
I honestly, do not know why .editReply() wouldn't already work, but whatever I guess.