Prevent Updating collection with custom buttons

[round lodge]

Hi!

I'm trying to add some custom buttons for handling custom events in the Navbar above a collection item detail (watch image).
The business logic behind the buttons is working fine but every time i try to click on those buttons ,the collection item update event is triggered, resulting in the green alert at bottom page.

The question is: How can i prevent the update of the collection item when i click on those actions ("connect", "Print Barcode")? Am i doing the correct thing putting those buttons up above in the Navbar? Could i handle it in a better way?

Thanks in advance 🙂

[dry spire]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Swap in your own React components - Collections
• React Hooks - useDocumentEvents
• Form Builder Plugin - Basic Usage - Options - formSubmissionOverrides
• Cloud Teams - Billing

Community-Help:

• TypeError: Cannot read properties of undefined (reading 'fields')
• deploy to GCP

[hexed marsh]

@round lodge Do the buttons have "type='button'" on them?

If not, they will be treated as "submit" inputs as they exist within a form element

Which would explain the behavior you're seeing

[round lodge]

Great! this solved my question. Thank you so much

[dry spire]

Payload Bot

Thread Solved!

Glad your issue was resolved! :tada: If you want to help make payload better, please give us a :star: on GitHub and review us - It helps us a lot.

🌟 Star Us on GitHub

Click here to star us on GitHub

👍 Review Us

Click here to review us on G2

[long pelican]

How do you add those buttons? @round lodge

[haughty venture]

@round lodge This two buttons are collection custom tabs?

[long pelican]

@haughty venture If you're looking for a workaround, I added a custom UI field and changed it position to the sidebar.
https://payloadcms.com/docs/fields/ui

    {
      name: "buildPreview",
      label: "Build Preview",
      type: "ui",
      admin: {
        components: {
          Field: BuildPreviewButton,
        },
        position: "sidebar",
      },
    },

[haughty venture]

Yes, but this does not add buttons to the top bar.

[long pelican]

Yeah, I couldn't find anything on how to add button to top bar

[haughty venture]

I have managed to add them as tabs.

[long pelican]

nicee

[haughty venture]

@round lodge This are Tabs but in your image are buttons.
Can you share you buttons code please ??

[haughty venture]

@long pelican This is the code to add buttons.
TAB property is object or custom component.

[long pelican]

Wow, I will try this. Thanks @haughty venture