BadRequest: 400: Invalid Form Body on Model submit

[sour pewter]

I'm just tryna send a Modal after a user presses a button but get DSharpPlus.Exceptions.BadRequestException: Bad request: 400 back, with a JsonMessage of Invalid Form Body.

I looked around using the search in here but the only other guy with this issue had almost the exact same code and never responded if it worked for him after removing DeferAsync which im not using.
Heres my shitcode:

await event.Interaction.CreateResponseAsync(InteractionResponseType.Modal, new DiscordInteractionResponseBuilder()
  .WithTitle("Funny Title")
  .WithCustomId("submitcreditcardinfomodal")
  .AddComponents(
    new TextInputComponent("front", "frontnumbers", "The Numbers on the front of the card", null, true, TextInputStyle.Short, 5, 64),
    new TextInputComponent("name", "cardholdername", "The name on the card", null, true, TextInputStyle.Paragraph, 5, 64)
    new TextInputComponent("back", "validationnumber", "The 3 or 4 digit number on the back, usually called CVV or CVC", null, true, TextInputStyle.Paragraph, 5, 64)
    new TextInputComponent("expiry", "expirydate", "The expiry date of the card", null, true, TextInputStyle.Paragraph, 3, 64)
  ));

am i havin a smoothbrain moment??

[stiff fog]

Automated suggestion: How to find a solution to a `BadRequestException`

It's true that the BadRequestException doesn't provide that much information to the console. To get more info about what you did wrong, catch the BadRequestException yourself, and check the .JsonMessage and the .Errors properties.

This action was performed automatically. Please use the buttons below to vote on your experience

[sour pewter]

oh, i didnt know theres an Errors prop, lemme check that

{
  "data": {
    "components": {
      "0": {
        "components": {
          "1": {
            "_errors": [
              {
                "code": "COMPONENT_LAYOUT_WIDTH_EXCEEDED",
                "message": "The specified component exceeds the maximum width"
              }
            ]
          }
        }
      }
    }
  }
}
``` thats... the second text input component i guess? idk about that error tho

[wheat prawn]

Have you tried to use only one textinput per addConponents? On messages you have to because of the actionrow representation idk if this is here also true

In the example they do this

Hans tag modal example

[magic hawk]

// This applies to anywhere where you have an interaction.
// Keep in mind this isn't designed to be copy-paste, but simply to show the modal flow.

var response = new DiscordInteractionResponseBuilder();

response
  .WithTitle("Super cool modal!")
  .WithCustomId("my-modal")
  .AddComponents(new TextInputComponent(label: "Favorite food", customId: "fav-food", placeholder: "Pizza, Icecream, etc", max_length: 30)
  .AddComponents(new TextInputComponent("Why?", "why-fav", "Because it tastes good", required: false, style: TextInputStyle.Paragraph);

await interaction.CreateResponseAsync(InteractionResponseType.Modal, response);

// To get the response of this modal, simply listen to the ModalSubmitted event on the DiscordClient

[short urchin]

Modals can only the first response to an interaction afaik

[sour pewter]

but this is the first reponse

the user clicks a button and this modal is the response, no?

[sour pewter]

this fixed it. thanks

[short urchin]

Ah I didn't read the full problem

[swift bridge]

okay I'm stupid and I apologize for this, but you need to chain .AddComponent calls becuase of how the internals of the builder works

[sour pewter]

i suspect this is more the result of a shitty api, but its alright :D