Gbrad
Gbrad
DIAdiscord.js - Imagine an app
Created by Gbrad on 4/24/2024 in #djs-questions
Unique Id on modal crashing bot submission after cancel
I see this question all over the discord and I've tried numerous different suggestions that people have given and yet I still can't get this to work. I'm hitting the good ole, "modal pop-up, user hits cancel, modal pop-up again, submit, modal submission is recorded, bot fails due to an unknown interaction 10062. To my knowledge what's happening is there is no response to the first initial opening of the modal. Therefore, when the next modal is completed, the queue is ruined and the bot doesn't know what to do with it. The biggest thing is ensuring that the id of the interation is unique, aka using the interaction.id and setting that to the modal customId, yet this doesn't seem to work for me. I'm even passing in a random number. I'm sure it's something little and if it is, drop me the documentation and tell me it's a skill issue and I'll read more.
const { ActionRowBuilder, ModalBuilder, TextInputBuilder, TextInputStyle, SlashCommandBuilder } = require('discord.js');
let randomNumber = Math.floor(Math.random() * 10000);

module.exports = {
data: new SlashCommandBuilder()
.setName('record')
.setDescription('Records game details.'),
category: 'mtg',
async execute(interaction) {
const modal = new ModalBuilder({
customId: `myModal-${interaction.user.id}-${randomNumber}`,
title: 'Game Summary',
});

// question 1
const whoPlayedInTheGameInput = new TextInputBuilder({
customId: 'whoPlayedInTheGameInput',
label: 'Who played in the game?',
style: TextInputStyle.Short,
});

// question 2
const gameFormatInput = new TextInputBuilder({
customId: 'gameFormatInput',
label: 'What was the game format?',
style: TextInputStyle.Short,
});

...

...

// set rows for the modal
const firstActionRow = new ActionRowBuilder().addComponents(whoPlayedInTheGameInput);
const secondActionRow = new ActionRowBuilder().addComponents(gameFormatInput);
const thirdActionRow = new ActionRowBuilder().addComponents(whoWonTheGameInput);
const fourthActionRow = new ActionRowBuilder().addComponents(howLongWasTheGameInput);
const fifthActionRow = new ActionRowBuilder().addComponents(matchHighlightInput);

modal.addComponents(firstActionRow, secondActionRow, thirdActionRow, fourthActionRow, fifthActionRow);

await interaction.showModal(modal);

// wait for the modal to be submitted
const filter = (interaction) => interaction.customId === `myModal-${interaction.user.id}-${randomNumber}`;

interaction
.awaitModalSubmit({ filter, time: 60_000 })
.then((modalInteraction) => {
const whoPlayedInTheGameInputValue = modalInteraction.fields.getTextInputValue('whoPlayedInTheGameInput');
const gameFormatInputValue = modalInteraction.fields.getTextInputValue('gameFormatInput');
const whoWonTheGameInputValue = modalInteraction.fields.getTextInputValue('whoWonTheGameInput');
const howLongWasTheGameInputValue = modalInteraction.fields.getTextInputValue('howLongWasTheGameInput');
const matchHighlightInputValue = modalInteraction.fields.getTextInputValue('matchHighlightInput');

const output = `Players: ${whoPlayedInTheGameInputValue}\nFormat: ${gameFormatInputValue}\nWinner: ${whoWonTheGameInputValue}\nMatch Time: ${howLongWasTheGameInputValue}\nMatch Highlight: ${matchHighlightInputValue}`;

modalInteraction.reply(output);
console.log(`----- ${interaction.user.username} successfully created a record -----\n${output}`);
})
.catch((err) => {
console.log(`Error: ${err}`);
});
},
};
const { ActionRowBuilder, ModalBuilder, TextInputBuilder, TextInputStyle, SlashCommandBuilder } = require('discord.js');
let randomNumber = Math.floor(Math.random() * 10000);

module.exports = {
data: new SlashCommandBuilder()
.setName('record')
.setDescription('Records game details.'),
category: 'mtg',
async execute(interaction) {
const modal = new ModalBuilder({
customId: `myModal-${interaction.user.id}-${randomNumber}`,
title: 'Game Summary',
});

// question 1
const whoPlayedInTheGameInput = new TextInputBuilder({
customId: 'whoPlayedInTheGameInput',
label: 'Who played in the game?',
style: TextInputStyle.Short,
});

// question 2
const gameFormatInput = new TextInputBuilder({
customId: 'gameFormatInput',
label: 'What was the game format?',
style: TextInputStyle.Short,
});

...

...

// set rows for the modal
const firstActionRow = new ActionRowBuilder().addComponents(whoPlayedInTheGameInput);
const secondActionRow = new ActionRowBuilder().addComponents(gameFormatInput);
const thirdActionRow = new ActionRowBuilder().addComponents(whoWonTheGameInput);
const fourthActionRow = new ActionRowBuilder().addComponents(howLongWasTheGameInput);
const fifthActionRow = new ActionRowBuilder().addComponents(matchHighlightInput);

modal.addComponents(firstActionRow, secondActionRow, thirdActionRow, fourthActionRow, fifthActionRow);

await interaction.showModal(modal);

// wait for the modal to be submitted
const filter = (interaction) => interaction.customId === `myModal-${interaction.user.id}-${randomNumber}`;

interaction
.awaitModalSubmit({ filter, time: 60_000 })
.then((modalInteraction) => {
const whoPlayedInTheGameInputValue = modalInteraction.fields.getTextInputValue('whoPlayedInTheGameInput');
const gameFormatInputValue = modalInteraction.fields.getTextInputValue('gameFormatInput');
const whoWonTheGameInputValue = modalInteraction.fields.getTextInputValue('whoWonTheGameInput');
const howLongWasTheGameInputValue = modalInteraction.fields.getTextInputValue('howLongWasTheGameInput');
const matchHighlightInputValue = modalInteraction.fields.getTextInputValue('matchHighlightInput');

const output = `Players: ${whoPlayedInTheGameInputValue}\nFormat: ${gameFormatInputValue}\nWinner: ${whoWonTheGameInputValue}\nMatch Time: ${howLongWasTheGameInputValue}\nMatch Highlight: ${matchHighlightInputValue}`;

modalInteraction.reply(output);
console.log(`----- ${interaction.user.username} successfully created a record -----\n${output}`);
})
.catch((err) => {
console.log(`Error: ${err}`);
});
},
};
16 replies