fix(devtools): Added type attribute to all button elements (#1581)

Adding type attribute tells browser what type of button it is. For most browsers the default type of button is submit. This causes a full page post back in older legacy server rendered frameworks like asp.net webfo
TanStack · Jan 5, 2021 · 6458c50 · 6458c50 · vercel · Jan 5, 2021
1 parent a6c2011
commit 6458c50
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx
@@ -221,6 +221,7 @@ export function ReactQueryDevtools({
         />
         {isResolvedOpen ? (
           <Button
+            type="button"
             {...otherCloseButtonProps}
             onClick={() => {
               setIsOpen(false)
@@ -255,6 +256,7 @@ export function ReactQueryDevtools({
       </ThemeProvider>
       {!isResolvedOpen ? (
         <button
+          type="button"
           {...otherToggleButtonProps}
           aria-label="Open React Query Devtools"
           onClick={() => {
@@ -537,6 +539,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                         ))}
                       </Select>
                       <Button
+                        type="button"
                         onClick={() => setSortDesc(old => !old)}
                         style={{
                           padding: '.3rem .4rem',
@@ -702,6 +705,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                 }}
               >
                 <Button
+                  type="button"
                   onClick={() => activeQuery.fetch()}
                   disabled={activeQuery.state.isFetching}
                   style={{
@@ -711,6 +715,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   Refetch
                 </Button>{' '}
                 <Button
+                  type="button"
                   onClick={() => queryClient.invalidateQueries(activeQuery)}
                   style={{
                     background: theme.warning,
@@ -720,6 +725,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   Invalidate
                 </Button>{' '}
                 <Button
+                  type="button"
                   onClick={() => queryClient.resetQueries(activeQuery)}
                   style={{
                     background: theme.gray,
@@ -728,6 +734,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   Reset
                 </Button>{' '}
                 <Button
+                  type="button"
                   onClick={() => queryClient.removeQueries(activeQuery)}
                   style={{
                     background: theme.danger,