new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

components & accessibility

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

FileButton onChange not triggered in Menu

When FileButton is rendered inside a Menu component, the onChange callback will not be triggered even though the file dialog opens. This occurs because Menu closes automatically when an item is clicked, which unmounts the FileButton and its underlying input[type="file"] element from the DOM. When the file is selected, the input element is no longer in the DOM, so the onChange callback is never triggered.

FileButton in Menu fix: keepMounted prop

To fix FileButton not working in Menu, set the keepMounted prop on the Menu component. This prevents the FileButton from being unmounted when the Menu closes, allowing the onChange callback to be triggered when a file is selected.

FileButton in Menu fix: closeOnItemClick prop

To fix FileButton not working in Menu, set the closeOnItemClick={false} prop on the Menu.Item component that contains the FileButton. This prevents the Menu from closing when that item is clicked, keeping the FileButton mounted and allowing the onChange callback to be triggered.

Progress component role and aria attributes

Progress section has the role="progressbar" attribute. Progress section has the aria-valuenow attribute with the current value. aria-valuemin and aria-valuemax attributes are always set to 0 and 100 as the component does not support other values.

Progress aria-label for accessibility

Set the aria-label attribute to label the progress. For the simple Progress component, use <Progress aria-label="Uploading progress" value={10} />. For the compound component, use <Progress.Root><Progress.Section aria-label="Uploading progress" value={10} /></Progress.Root>.

Give your agent this brain