discord.js - Imagine an app•6mo ago

Modal Submit not Working

Can someone help me, I can't submit a Modal I can open it, but it won't even get to the submit function for some reason packages : :djs: @discordjs/builders: 1.8.2 :djs: discord.js: 14.15.3 command :

// modal.js
'use strict';

import { SlashCommandBuilder, ActionRowBuilder, ModalBuilder, TextInputBuilder } from '@discordjs/builders';
import { PermissionFlagsBits, TextInputStyle } from 'discord.js';

export default {
    data: new SlashCommandBuilder()
        .setName('modal')
        .setDescription('test modal')
        .setDefaultMemberPermissions(PermissionFlagsBits.UseApplicationCommands),

    /**
     * @param {import('discord.js').Client} client
     * @param {import('discord.js').Interaction} interaction
     */
    async execute(client, interaction) {
        const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');

        const favoriteColorInput = new TextInputBuilder()
            .setCustomId('favoriteColorInput')
            .setLabel("What's your favorite color?")
            .setStyle(TextInputStyle.Short);

        const hobbiesInput = new TextInputBuilder()
            .setCustomId('hobbiesInput')
            .setLabel("What's some of your favorite hobbies?")
            .setStyle(TextInputStyle.Paragraph);

        const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput);
        const secondActionRow = new ActionRowBuilder().addComponents(hobbiesInput);

        modal.addComponents(firstActionRow, secondActionRow);

        await interaction.showModal(modal);
    },

    /**
     * @param {import('discord.js').Client} client
     * @param {import('discord.js').Interaction} interaction
     */
    async submit(client, interaction) {
        console.log('modalSubmit');
    },
};

// modal.js
'use strict';

import { SlashCommandBuilder, ActionRowBuilder, ModalBuilder, TextInputBuilder } from '@discordjs/builders';
import { PermissionFlagsBits, TextInputStyle } from 'discord.js';

export default {
    data: new SlashCommandBuilder()
        .setName('modal')
        .setDescription('test modal')
        .setDefaultMemberPermissions(PermissionFlagsBits.UseApplicationCommands),

    /**
     * @param {import('discord.js').Client} client
     * @param {import('discord.js').Interaction} interaction
     */
    async execute(client, interaction) {
        const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');

        const favoriteColorInput = new TextInputBuilder()
            .setCustomId('favoriteColorInput')
            .setLabel("What's your favorite color?")
            .setStyle(TextInputStyle.Short);

        const hobbiesInput = new TextInputBuilder()
            .setCustomId('hobbiesInput')
            .setLabel("What's some of your favorite hobbies?")
            .setStyle(TextInputStyle.Paragraph);

        const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput);
        const secondActionRow = new ActionRowBuilder().addComponents(hobbiesInput);

        modal.addComponents(firstActionRow, secondActionRow);

        await interaction.showModal(modal);
    },

    /**
     * @param {import('discord.js').Client} client
     * @param {import('discord.js').Interaction} interaction
     */
    async submit(client, interaction) {
        console.log('modalSubmit');
    },
};

6 Replies

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

𝙎𝙩𝙖𝙠𝙪™OP•6mo ago

event:

// interactionCreate.js
'use strict';

import log from '../helpers/log.js';
import { capitalizeFirstLetter } from '../helpers/utility.js';

/** @type {{once: boolean, name: string, execute(*, *)}} */
export default {
    name: 'interactionCreate',
    once: false,
    /**
     * @param {import('discord.js').Client} client
     * @param {import('discord.js').Interaction} interaction
     * @returns
     */
    execute(client, interaction) {
        //? Check If Command Exists
        if (!client.commands.has(interaction.commandName)) {
            console.error(interaction.commandName);
            return false;
        }

        //? Trigger On Command
        if (interaction.isCommand()) {
            const command = client.commands.get(interaction.commandName);

            log.trace(`${interaction.user.username}(${interaction.user.id}) used ${capitalizeFirstLetter(command.data.name)}!`);

            command.execute(client, interaction).catch(console.error);
        }

        //? Trigger On Autocomplete
        else if (interaction.isAutocomplete()) {
            const command = client.commands.get(interaction.commandName);

            command.autocomplete(client, interaction).catch(console.error);
        }

        //? Trigger On Modal Submit
        else if (interaction.isModalSubmit()) {
            const command = client.commands.get(interaction.commandName);

            log.trace(`${interaction.user.username}(${interaction.user.id}) submitted ${capitalizeFirstLetter(command.data.name)} modal!`);

            command.submit(client, interaction).catch(console.error);
        }
    },
};

// interactionCreate.js
'use strict';

import log from '../helpers/log.js';
import { capitalizeFirstLetter } from '../helpers/utility.js';

/** @type {{once: boolean, name: string, execute(*, *)}} */
export default {
    name: 'interactionCreate',
    once: false,
    /**
     * @param {import('discord.js').Client} client
     * @param {import('discord.js').Interaction} interaction
     * @returns
     */
    execute(client, interaction) {
        //? Check If Command Exists
        if (!client.commands.has(interaction.commandName)) {
            console.error(interaction.commandName);
            return false;
        }

        //? Trigger On Command
        if (interaction.isCommand()) {
            const command = client.commands.get(interaction.commandName);

            log.trace(`${interaction.user.username}(${interaction.user.id}) used ${capitalizeFirstLetter(command.data.name)}!`);

            command.execute(client, interaction).catch(console.error);
        }

        //? Trigger On Autocomplete
        else if (interaction.isAutocomplete()) {
            const command = client.commands.get(interaction.commandName);

            command.autocomplete(client, interaction).catch(console.error);
        }

        //? Trigger On Modal Submit
        else if (interaction.isModalSubmit()) {
            const command = client.commands.get(interaction.commandName);

            log.trace(`${interaction.user.username}(${interaction.user.id}) submitted ${capitalizeFirstLetter(command.data.name)} modal!`);

            command.submit(client, interaction).catch(console.error);
        }
    },
};

𝙎𝙩𝙖𝙠𝙪™OP•6mo ago

Also it prints an 'undefined' on Modal Submit

monbrey•6mo ago

Your event is going to immediately ignore anything thats not a command !client.commands.has(interaction.commandName) You should be doing somrthing like

if(interaction.isCommand()) {
  //get command name
} else if (interaction.isAutocomplete()) {
  // handle autocomplete
} else if (interaction.isModalSubmit()) {
  // handle modal
}

if(interaction.isCommand()) {
  //get command name
} else if (interaction.isAutocomplete()) {
  // handle autocomplete
} else if (interaction.isModalSubmit()) {
  // handle modal
}

or, handle the modal in the command

d.js docs•6mo ago

:guide: Popular Topics: Collectors - Interaction collectors > Await modal submit read more

𝙎𝙩𝙖𝙠𝙪™OP•6mo ago

i see now its working thanks!

Gaming

Programming

Modal Submit not Working