Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Avoid redundant preventDefault
Remove ineffective or duplicate preventDefault calls after checking the event default action; readOnly and disabled do not replace every event cancellation.
Bad example
| 1 | const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => { |
| 2 | // Redundant: readOnly already prevents modification |
| 3 | event.preventDefault(); |
| 4 | openModal(); |
| 5 | }; |
| 6 |
|
| 7 | return <input readOnly value="Search..." onFocus={handleFocus} />; |
Explanation (EN)
Canceling an input focus event does not implement read-only behavior; readOnly expresses non-editability directly.
Objašnjenje (HR)
Otkazivanje focus događaja ne čini input nepromjenjivim; readOnly izravno opisuje zabranu uređivanja.
Good example
| 1 | const handleFocus = () => { |
| 2 | // Rely on the standard browser behavior for readOnly inputs |
| 3 | openModal(); |
| 4 | }; |
| 5 |
|
| 6 | return <input readOnly value="Search..." onFocus={handleFocus} />; |
Explanation (EN)
We rely on the declarative 'readOnly' attribute to enforce non-editability. The event handler focuses solely on the side effect (opening the modal) without interfering with standard browser events.
Objašnjenje (HR)
Oslanjamo se na deklarativni atribut 'readOnly' kako bismo onemogućili uređivanje. Event handler se fokusira isključivo na popratni efekt (otvaranje modala) bez ometanja standardnih događaja preglednika.
Notes (EN)
Inspect the actual event, whether it is cancelable, and the native action being prevented. Remove preventDefault only when it has no required effect. For non-editable controls prefer declarative semantics.
Bilješke (HR)
Provjeri stvarni događaj, može li se otkazati i koju zadanu radnju sprječava. preventDefault ukloni samo kada nema potreban učinak. Za zabranu uređivanja koristi deklarativnu semantiku kontrole.
Exceptions / Tradeoffs (EN)
readOnly does not prevent focus, selection or form submission. A separate cancelable action may still require preventDefault. Use a semantic button for an action disguised as an input.