discord.js - Imagine an app•9mo ago

Unable to show modal from button interaction. (discord V14.8.0)

Hello, I've been struggling to get the modal from my button to work. I have done everything right as far as I can tell and have no errors from my code.

const { CaptchaGenerator } = require('captcha-canvas');
const { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder,  AttachmentBuilder, ModalBuilder, TextInputBuilder} = require('discord.js');
const array = [];

module.exports = {
  name: 'verify',
  description: 'Verify that you are not a bot',
  devOnly: true,
  testOnly: true,

  callback: async (client, interaction) =>{
    const captcha = new CaptchaGenerator()
            .setDimension(150, 600)
            .setCaptcha({size: 60, characters: 10})
            .setDecoy({ opacity: 1, size: 40 })
            .setTrace()

    const buffer = captcha.generateSync();

    const verifyAttachment = new AttachmentBuilder(buffer, { name: 'captcha.png'});

    
    const embed = new EmbedBuilder()
      .setTitle('Keyed Chaos Captcha')
      .setDescription('Please complete the captcha!')
      .setImage('attachment://captcha.png')

    console.log(`Example captcha text:${captcha.text}\n`);
    
    const target = interaction.user.id;

    let checkmk = new ButtonBuilder()
          .setCustomId('answer')
          .setLabel('Answer Captcha')
          .setStyle(ButtonStyle.Success);

    const row = new ActionRowBuilder()
          .addComponents(checkmk);
  
    
    
    response = await interaction.reply({
      embeds:[embed], 
      files: [verifyAttachment], 
      components: [row], 
      ephemeral: true});
      
    client.on(Event.InteractionCreate, async(interaction) => 
    {
      if (interaction.isButton()){
        if(interaction.customId === 'answer'){
          const modal = new ModalBuilder()
          .setCustomId('verification-modal')
          .setTitle('Keyed Chaos Verification')
          .addComponents([
            new ActionRowBuilder().addComponents(
              new TextInputBuilder()
              .setCustomId('CaptchaCode')
              .setLabel('Please answer the captcha')
              .setStyle(TextInputStyle.Short)
              .setMaxLength(10)
              .setRequired(true),
            ),
          ]);

          await interaction.showModal(modal);
        }
      }

      if (interaction.type === InteractionType.ModalSubmit){
        if(interaction.customId === 'verification-modal'){
          const response = interaction.fields.getTextInputValue('CaptchaCode');
          interaction.reply('Thank you for submitting your answer.');
        }
      }
    });

  },

};

const { CaptchaGenerator } = require('captcha-canvas');
const { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder,  AttachmentBuilder, ModalBuilder, TextInputBuilder} = require('discord.js');
const array = [];

module.exports = {
  name: 'verify',
  description: 'Verify that you are not a bot',
  devOnly: true,
  testOnly: true,

  callback: async (client, interaction) =>{
    const captcha = new CaptchaGenerator()
            .setDimension(150, 600)
            .setCaptcha({size: 60, characters: 10})
            .setDecoy({ opacity: 1, size: 40 })
            .setTrace()

    const buffer = captcha.generateSync();

    const verifyAttachment = new AttachmentBuilder(buffer, { name: 'captcha.png'});

    
    const embed = new EmbedBuilder()
      .setTitle('Keyed Chaos Captcha')
      .setDescription('Please complete the captcha!')
      .setImage('attachment://captcha.png')

    console.log(`Example captcha text:${captcha.text}\n`);
    
    const target = interaction.user.id;

    let checkmk = new ButtonBuilder()
          .setCustomId('answer')
          .setLabel('Answer Captcha')
          .setStyle(ButtonStyle.Success);

    const row = new ActionRowBuilder()
          .addComponents(checkmk);
  
    
    
    response = await interaction.reply({
      embeds:[embed], 
      files: [verifyAttachment], 
      components: [row], 
      ephemeral: true});
      
    client.on(Event.InteractionCreate, async(interaction) => 
    {
      if (interaction.isButton()){
        if(interaction.customId === 'answer'){
          const modal = new ModalBuilder()
          .setCustomId('verification-modal')
          .setTitle('Keyed Chaos Verification')
          .addComponents([
            new ActionRowBuilder().addComponents(
              new TextInputBuilder()
              .setCustomId('CaptchaCode')
              .setLabel('Please answer the captcha')
              .setStyle(TextInputStyle.Short)
              .setMaxLength(10)
              .setRequired(true),
            ),
          ]);

          await interaction.showModal(modal);
        }
      }

      if (interaction.type === InteractionType.ModalSubmit){
        if(interaction.customId === 'verification-modal'){
          const response = interaction.fields.getTextInputValue('CaptchaCode');
          interaction.reply('Thank you for submitting your answer.');
        }
      }
    });

  },

};

10 Replies

d.js toolkit•9mo 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

Law•9mo ago

An example of the bot running

treble/luna•9mo ago

dont nest your listeners like that that will cause issues instead use this

d.js docs•9mo ago

ButtonInteraction#awaitModalSubmit() Collects a single modal submit interaction that passes the filter. The Promise will reject if the time expires.

treble/luna•9mo ago

also might want to update your djs version

Law•9mo ago

I will see if I can update my DJs without breaking captcha-canvas package I thought it may be the listeners but I was unsure really thank you for confirming that for me. Looking at what you sent me @werewolvinny 👻🌈 and that applies from what I understand to the submission of the modal and not actually showing the modal after the button click

treble/luna•9mo ago

then use a collector

Law•9mo ago

I can retry using a collector most definitely and thank you.

d.js docs•9mo ago

Message#awaitMessageComponent() Collects a single component interaction that passes the filter. The Promise will reject if the time expires.

Law•9mo ago

Taking a look at it as we speak @werewolvinny 👻🌈 Thank you this worked

Gaming

Programming

Unable to show modal from button interaction. (discord V14.8.0)