discord.js - Imagine an app•8mo ago

MessageComponentCollector gives wrong button customId

Code: https://pastebin.com/Vk2fFSvi Hi! So, I'm creating a tic-tac-toe command, and for the most part, it's done. However, I have a weird issue. I originally used an interactionCreate event with the buttons, but now I am changing it to a collector with a collect event. The issue is the fact that the collector doesn't get the right customId for the button. It works perfectly on the interactionCreate, but now it won't work with the collector. Yes, that is the only thing I changed. I did not touch anything else at all. And before you say that I should stick with the interactionCreate event, I can't because I need to handle each game on its own, which is what the collector will do, as it's specific to a message. Does anybody know why the collector is doing this and/or how to fix it? It was suggested to post here, as my question/problem is a little more complicated than other ones, so here I am.

Pastebin

const Discord = require('discord.js');const { MessageActionRow, Mes...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

20 Replies

d.js toolkit•8mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button! - ✅ Marked as resolved by OP

Bubby•8mo ago

Already have it in the tag, but version is 13.16.0 Should also note this: I have my buttons defined with their custom IDs, and then I have the beginning of the collector. When pressing any of the buttons on row 3, it thinks button 5 with the customId ttt_button_5 was pressed, even though that's obviously not the correct button. In the console.log line where I log the customId of the button pressed, it does indeed output ttt_button_5.

const tttButtonsRow1 = new MessageActionRow()
            .addComponents([
                new MessageButton()
                    .setCustomId('ttt_button_1')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_2')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_3')
                    .setLabel('-')
                    .setStyle('SECONDARY')
            ]);
        const tttButtonsRow2 = new MessageActionRow()
            .addComponents([
                new MessageButton()
                    .setCustomId('ttt_button_4')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_5')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_6')
                    .setLabel('-')
                    .setStyle('SECONDARY')
            ]);
        const tttButtonsRow3 = new MessageActionRow()
            .addComponents([
                new MessageButton()
                    .setCustomId('ttt_button_7')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_8')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_9')
                    .setLabel('-')
                    .setStyle('SECONDARY')
            ]);
        let button1 = null;
        let button2 = null;
        let button3 = null;
        let button4 = null;
        let button5 = null;
        let button6 = null;
        let button7 = null;
        let button8 = null;
        let button9 = null;
        let buttonArray = [button1, button2, button3, button4, button5, button6, button7, button8, button9];
        await message.channel.send({ content: `<@${opponent.id}>, <@${message.author.id}> has challenged you to a game of old-fashioned Tic-Tac-Toe!`, embeds: [tttEmbed], components: [tttButtonsRow1, tttButtonsRow2, tttButtonsRow3] }).then(async tttMsg => {

            const filter = interaction => (interaction.customId == 'ttt_button_1') || (interaction.customId == 'ttt_button_2') || (interaction.customId == 'ttt_button_3') || (interaction.customId == 'ttt_button_4') || (interaction.customId = 'ttt_button_5') || (interaction.customId == 'ttt_button_6') || (interaction.customId == 'ttt_button_7') || (interaction.customId == 'ttt_button_8') || (interaction.customId == 'ttt_button_9');
            const collector = tttMsg.createMessageComponentCollector({
                filter: filter
            });

            collector.on('collect', async (interaction) => {
                console.log(interaction.customId); ...

const tttButtonsRow1 = new MessageActionRow()
            .addComponents([
                new MessageButton()
                    .setCustomId('ttt_button_1')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_2')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_3')
                    .setLabel('-')
                    .setStyle('SECONDARY')
            ]);
        const tttButtonsRow2 = new MessageActionRow()
            .addComponents([
                new MessageButton()
                    .setCustomId('ttt_button_4')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_5')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_6')
                    .setLabel('-')
                    .setStyle('SECONDARY')
            ]);
        const tttButtonsRow3 = new MessageActionRow()
            .addComponents([
                new MessageButton()
                    .setCustomId('ttt_button_7')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_8')
                    .setLabel('-')
                    .setStyle('SECONDARY'),
                new MessageButton()
                    .setCustomId('ttt_button_9')
                    .setLabel('-')
                    .setStyle('SECONDARY')
            ]);
        let button1 = null;
        let button2 = null;
        let button3 = null;
        let button4 = null;
        let button5 = null;
        let button6 = null;
        let button7 = null;
        let button8 = null;
        let button9 = null;
        let buttonArray = [button1, button2, button3, button4, button5, button6, button7, button8, button9];
        await message.channel.send({ content: `<@${opponent.id}>, <@${message.author.id}> has challenged you to a game of old-fashioned Tic-Tac-Toe!`, embeds: [tttEmbed], components: [tttButtonsRow1, tttButtonsRow2, tttButtonsRow3] }).then(async tttMsg => {

            const filter = interaction => (interaction.customId == 'ttt_button_1') || (interaction.customId == 'ttt_button_2') || (interaction.customId == 'ttt_button_3') || (interaction.customId == 'ttt_button_4') || (interaction.customId = 'ttt_button_5') || (interaction.customId == 'ttt_button_6') || (interaction.customId == 'ttt_button_7') || (interaction.customId == 'ttt_button_8') || (interaction.customId == 'ttt_button_9');
            const collector = tttMsg.createMessageComponentCollector({
                filter: filter
            });

            collector.on('collect', async (interaction) => {
                console.log(interaction.customId); ...

For new people, make sure to scroll up ^^

SpecialSauce•8mo ago

If you press button 9 as the first interaction does it also log button 5?

Bubby•8mo ago

lemme see yes, it does

SpecialSauce•8mo ago

Where you create the collector can you also log tttMsg.components

Bubby•8mo ago

you mean underneath console.log(interaction.customId)? or outside of it

SpecialSauce•8mo ago

Above const collector

Bubby•8mo ago

k I'm guessing you wanted me to check what the buttons' customIds come out to be when logged, so I changed it to tttMsg.components[2] to show the third row, which is where the issue persists. Here's the full output of that log:

MessageActionRow {
  type: 'ACTION_ROW',
  components: [
    MessageButton {
      type: 'BUTTON',
      label: '-',
      customId: 'ttt_button_7',
      style: 'SECONDARY',
      emoji: null,
      url: null,
      disabled: false
    },
    MessageButton {
      type: 'BUTTON',
      label: '-',
      customId: 'ttt_button_8',
      style: 'SECONDARY',
      emoji: null,
      url: null,
      disabled: false
    },
    MessageButton {
      type: 'BUTTON',
      label: '-',
      customId: 'ttt_button_9',
      style: 'SECONDARY',
      emoji: null,
      url: null,
      disabled: false
    }
  ]
}

MessageActionRow {
  type: 'ACTION_ROW',
  components: [
    MessageButton {
      type: 'BUTTON',
      label: '-',
      customId: 'ttt_button_7',
      style: 'SECONDARY',
      emoji: null,
      url: null,
      disabled: false
    },
    MessageButton {
      type: 'BUTTON',
      label: '-',
      customId: 'ttt_button_8',
      style: 'SECONDARY',
      emoji: null,
      url: null,
      disabled: false
    },
    MessageButton {
      type: 'BUTTON',
      label: '-',
      customId: 'ttt_button_9',
      style: 'SECONDARY',
      emoji: null,
      url: null,
      disabled: false
    }
  ]
}