Fix for hitting enter after typing location name in filter

Threre are a bunch of other bugs with this behaviour, mostly performance related, but can get to that in refactoring
iaincollins · Oct 26, 2024 · fdea3f8 · fdea3f8
1 parent 3967034
commit fdea3f8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/components/tab-options/commodities.js b/components/tab-options/commodities.js
@@ -35,15 +35,15 @@ export default ({ disabled = false }) => {
   }, [lastUpdatedFilter, fleetCarrierFilter, minVolumeFilter, locationFilter, distanceFilter])
 
   useEffect(() => {
-    if (router.query?.maxDaysAgo && router.query.maxDaysAgo !== lastUpdatedFilter) {
+    if (router.query?.maxDaysAgo && parseInt(router.query.maxDaysAgo) !== parseInt(lastUpdatedFilter)) {
       setLastUpdatedFilter(router.query.maxDaysAgo)
       window.localStorage.setItem('lastUpdatedFilter', router.query.maxDaysAgo)
     }
-    if (router.query?.fleetCarriers && router.query.fleetCarriers !== fleetCarrierFilter) {
+    if (router.query?.fleetCarriers && router.query.fleetCarriers !== parseInt(fleetCarrierFilter)) {
       setFleetCarrierFilter(router.query.fleetCarriers)
       window.localStorage.setItem('fleetCarrierFilter', router.query.fleetCarriers)
     }
-    if (router.query?.minVolume && router.query.minVolume !== minVolumeFilter) {
+    if (router.query?.minVolume && parseInt(router.query.minVolume) !== parseInt(minVolumeFilter)) {
       setMinVolumeFilter(router.query.minVolume)
       window.localStorage.setItem('minVolumeFilter', router.query.minVolume)
     }
@@ -52,15 +52,18 @@ export default ({ disabled = false }) => {
       window.localStorage.setItem('locationFilter', router.query.location.trim())
       document.getElementById('location').value = router.query.location.trim()
     }
-    if (router.query?.maxDistance && router.query.maxDaysAgo !== distanceFilter) {
+    if (router.query?.maxDistance && parseInt(router.query.maxDaysAgo) !== parseInt(distanceFilter)) {
       setDistanceFilter(router.query.maxDistance)
       window.localStorage.setItem('distanceFilter', router.query.maxDistance)
     }
   }, [router.query])
 
   return (
     <div className='tab-options'>
-      <form onSubmit={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('CommodityFilterChangeEvent')); document.activeElement.blur() }}>
+      <form method='GET' action='/' onSubmit={(e) => {
+          e.preventDefault()
+          document.activeElement.blur()
+        }}>
         <label>
           <span className='tab-options__label-text'>Updated</span>
           <select
@@ -123,6 +126,12 @@ export default ({ disabled = false }) => {
             defaultValue={locationFilter}
             previous-value={locationFilter}
             size={12}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                document.activeElement.blur()
+              }
+            }}
             onBlur={async (e) => {
               const value = e.target.value.replace(/\u200B/g, '').trim()
               if (e.target.value === ZERO_WIDTH_SPACE) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.88.0",
+  "version": "0.89.0",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js
@@ -297,15 +297,15 @@ export default () => {
                         </p>
                       </td>
                     </tr>}
-                  <tr>
+                  {!commodity?.rare &&<tr>
                     <th className='is-hidden-mobile'>&nbsp;</th>
                     <td>
-                      <ul style={{ padding: '0 0 0 1rem' }}>
-                        <li style={{ marginBottom: '1rem' }}><Link href={`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/importers`}>Where to sell {commodity.name}</Link></li>
+                      <ul style={{ padding: '0 0 0 1.5rem' }}>
+                        <li style={{ marginBottom: '.5rem' }}><Link href={`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/importers`}>Where to sell {commodity.name}</Link></li>
                         <li><Link href={`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/exporters`}>Where to buy {commodity.name}</Link></li>
                       </ul>
                     </td>
-                  </tr>
+                  </tr>}
                 </tbody>
               </table>