Bug Report: Duplicate ID and Name Attributes in OpenHive Wallet Website

in voilk •  4 days ago

    20240704-1204-08.0072118-ezgif.com-video-to-gif-converter.gif

    There is a bug on the OpenHive Wallet website where the checkboxes for "Received from" and "Transfer to" under the "Filter By User" section have the same id and name attributes as the previous checkboxes in the "Transactions" section.

    Code Snippet
    https://github.com/openhive-network/wallet/blob/e3df8781eb22fe14404ec896cd45644f155f1f99/src/app/components/elements/Filters/index.jsx

    <div className="column small-4">
        <p>Filter By User</p>
        <div>
            <input
                onChange={handleFromUser}
                type="checkbox"
                id="outgoing"
                name="outgoing"
            />
            <label htmlFor="outgoing">
                Received from
            </label>
        </div>
        <div>
            <input
                onChange={handleToUser}
                type="checkbox"
                id="outgoing"
                name="outgoing"
            />
            <label htmlFor="outgoing">
                Transfer to
            </label>
        </div>
    </div>
    

    Problem:
    The id and name attributes for "Received from" and "Transfer to" checkboxes are both set to outgoing, which conflicts with the id and name of the outgoing checkbox in the "Transactions" section. This can lead to incorrect form behavior and UI issues.

    Solution:
    Assign unique id and name attributes to each checkbox to avoid conflicts.

    Example Fix:

    <div className="column small-4">
        <p>Filter By User</p>
        <div>
            <input
                onChange={handleFromUser}
                type="checkbox"
                id="receivedFrom"
                name="receivedFrom"
            />
            <label htmlFor="receivedFrom">
                Received from
            </label>
        </div>
        <div>
            <input
                onChange={handleToUser}
                type="checkbox"
                id="transferTo"
                name="transferTo"
            />
            <label htmlFor="transferTo">
                Transfer to
            </label>
        </div>
    </div>
    

    image.png



    image.png

    Vote for my Hive Witness

    U can vote for my Witness using Hive Keychain here: https://vote.hive.uno/@louis.witness

    image.png

    Vote for my Hive Engine Witness

    Vote for my Witness on Hive-Engine using Primersion Tool: https://primersion.com/he-witnesses Enter your Username and search for louis.witness

      Authors get paid when people like you upvote their post.
      If you enjoyed what you read here, create your account today and start earning FREE VOILK!