Search code examples
javascriptnode.jsdiscorddiscord.js

why this modal didnt show up?


I have this modal command, I want to make a modal shown to the user when they use the command modal. Is there anything wrong with the following code?

const { MessageActionRow, Modal, TextInputComponent } = require('discord.js');

client.on('interactionCreate', async (msg) => {
  if(msg.content === 'modal') {
        // Create the modal
        const modal = new Modal()
            .setCustomId('myModal')
            .setTitle('My Modal');
        // Add components to modal
        // Create the text input components
        const favoriteColorInput = new TextInputComponent()
            .setCustomId('favoriteColorInput')
            // The label is the prompt the user sees for this input
            .setLabel("What's your favorite color?")
            // Short means only a single line of text
            .setStyle('SHORT');
        const hobbiesInput = new TextInputComponent()
            .setCustomId('hobbiesInput')
            .setLabel("What's some of your favorite hobbies?")
            // Paragraph means multiple lines of text.
            .setStyle('PARAGRAPH');
        // An action row only holds one text input,
        // so you need one action row per text input.
        const firstActionRow = new MessageActionRow().addComponents(favoriteColorInput);
        const secondActionRow = new MessageActionRow().addComponents(hobbiesInput);
        // Add inputs to the modal
        modal.addComponents(firstActionRow, secondActionRow);
        // Show the modal to the user
        await msg.showModal(modal);
  }
});

Solution

  • The interactionCreate event is emitted when an interaction is created and takes a single parameter, an Interaction that was created. It's not a message and has no content property. As msg.content is undefined, it will never match the string "modal" so everything inside that if statement is ignored.

    If you want to check if someone sent a message with the word modal as its content, you can use the messageCreate event:

    client.on('messageCreate', async (msg) => {
      if (msg.content === 'modal') {
        // ...
    

    The problem is, that message doesn't have a showModal() method, only CommandInteraction, ButtonInteraction, SelectMenuInteraction, etc do.

    If you use the interactionCreate event, you'll need to check the command name, button ID, etc instead:

    client.on('interactionCreate', async (interaction) => {
      if (interaction.isCommand() && interaction.commandName === 'modal') {
        // ...
    
      // OR
      if (interaction.isButton() && interaction.customId === 'modal') {
        // ...