make buttons take focus so the blur events work

HTML is a cheeky rascal

Author: ryanflorence

app/routes/board.$id/components.tsx

@@ -9,6 +9,11 @@ export let SaveButton = forwardRef<
   return (
     <button
       ref={ref}
+      // this makes it so the button takes focus on clicks in safari I can't
+      // remember if this is the proper workaround or not, it's been a while!
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
+      // https://bugs.webkit.org/show_bug.cgi?id=22261
+      tabIndex={0}
       {...props}
       className="text-sm rounded-lg text-left p-2 font-medium text-white bg-brand-blue"
     />
@@ -23,6 +28,7 @@ export let CancelButton = forwardRef<
     <button
       ref={ref}
       type="button"
+      tabIndex={0}
       {...props}
       className="text-sm rounded-lg text-left p-2 font-medium hover:bg-slate-200 focus:bg-slate-200"
     />