seas-computing / mark-one

A UI component library for building React Apps (in development)
https://seas-computing.github.io/mark-one/
BSD 3-Clause "New" or "Revised" License
0 stars 1 forks source link

When used inside a form, ComboBox button causes form to be submitted #150

Closed rmainwork closed 5 months ago

rmainwork commented 1 year ago

Description

When using a ComboBox inside a form, clicking the dropdown button (which would normally expand the combobox dropdown) causes the form to be submitted. This is due to the button not having a type attribute set, causing the type attribute to fall back to it's default type which is "submit".

This only affects usage within forms (which is why it hasn't been an issue until now).

To Reproduce

import { useState } from 'react';

const options = [
  {
    label: 'Apples',
    value: 'a',
  },
  {
    label: 'Bananas',
    value: 'b',
  },
  {
    label: 'Cucumbers',
    value: 'c',
  },
  {
    label: 'Donuts',
    value: 'd',
  }
];

const [valueOne, setValueOne] = useState(null);

<form action="http://www.google.com">
<div>
  <Combobox
    isLabelVisible={true}
    options={options}
    label="Food"
    currentValue={valueOne}
    onOptionSelected={({ selectedItem }) => {setValueOne(selectedItem)}}
  />
  <p>
    You chose: <strong>{valueOne ? valueOne.label : ''}</strong>
  </p>
</div>
</form>

Expected Behavior

The dropdown should simply expand

Actual Behavior

The parent form is actually submitted