move checkbox

lib/index.js

@@ -39,12 +39,6 @@ const Price = ({ price, toggleCountry, isSelected }) => {
   const hover = useCallback(() => setHover(true));
   const leave = useCallback(() => setHover(false));
 
-  const openLink = useCallback((e) => {
-    // Don't open if the click was on the checkbox
-    if (e.target.type === "checkbox") return;
-    window.open(bookUrl(countryCode), "_blank");
-  });
-
   const style = {
     display: "flex",
     flexDirection: "row",
@@ -52,23 +46,20 @@ const Price = ({ price, toggleCountry, isSelected }) => {
     alignItems: "center",
     backgroundColor: isHovered ? "#d7d7d7" : "",
     padding: "4px 10px",
-    cursor: "pointer",
   };
 
   const checkbox = h("input", {
     type: "checkbox",
     checked: isSelected,
     onChange: () => toggleCountry(),
-    onClick: (e) => e.stopPropagation(),
   });
 
-  const nameLabel = h(
-    "span",
+  const link = h(
+    "a",
     {
-      style: {
-        marginLeft: "8px",
-        textDecoration: isHovered ? "underline" : "none",
-      },
+      style: { textDecoration: "underline", marginLeft: "8px" },
+      href: bookUrl(countryCode),
+      target: "_blank",
     },
     countryName || countryCode.toUpperCase(),
   );
@@ -80,15 +71,10 @@ const Price = ({ price, toggleCountry, isSelected }) => {
   );
 
   return h(
-    "div",
-    {
-      style,
-      onMouseEnter: hover,
-      onMouseLeave: leave,
-      onClick: openLink,
-    },
+    "label",
+    { style, onMouseEnter: hover, onMouseLeave: leave },
     checkbox,
-    nameLabel,
+    link,
     priceLabel,
   );
 };