Kyle Pope
f5265a589e
- Remove instant invalid:ring/border from Input component (was showing red outline on empty required fields before any interaction) - Add CSS rule: form[data-submitted] input:invalid shows red border - Add global submit listener in main.tsx that sets data-submitted on forms - Add required prop to Labels missing asterisks: PersonForm (First Name), LocationForm (Location Name), CalendarForm (Name), LockScreen (Username, Password, Confirm Password) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { Toaster } from 'sonner';
|
|
import App from './App';
|
|
import './index.css';
|
|
|
|
// Mark forms as submitted so CSS validation outlines only appear after a submit attempt.
|
|
// The attribute is cleared naturally when Sheet/Dialog forms unmount and remount.
|
|
document.addEventListener('submit', (e) => {
|
|
if (e.target instanceof HTMLFormElement) {
|
|
e.target.setAttribute('data-submitted', '');
|
|
}
|
|
}, true);
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
retry: 1,
|
|
staleTime: 5 * 60 * 1000,
|
|
},
|
|
},
|
|
});
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
<React.StrictMode>
|
|
<QueryClientProvider client={queryClient}>
|
|
<BrowserRouter>
|
|
<App />
|
|
<Toaster
|
|
position="top-right"
|
|
theme="dark"
|
|
style={{ pointerEvents: 'none' }}
|
|
toastOptions={{ style: { pointerEvents: 'auto' } }}
|
|
/>
|
|
</BrowserRouter>
|
|
</QueryClientProvider>
|
|
</React.StrictMode>
|
|
);
|