How to correctly use the clearHighlightedArea() function in react-img-mapper?

[nicfornicola]

I am makin an website that uses ImageMapper and am hoping to use it mostly on a phone.

On my iphone when I tap an image area, it highlights and then goes to href (which its supposed to), but when I hit the back button, the previously tapped areas area still highlighted.

The top, right and bottom areas have been clicked and will not become unhighlighted until a refresh

I figure I can do somthing like ~onclick clearHighlightedAreas but am new to web dev and am not sure how to properly call this function.

Any help is greatly appreciated thanks,
Nic

[NishargShah]

Hey @ndf17a

If you are using an uncontrolled way then

Here is the example of clearHighlightedAreas: https://img-mapper.github.io/react-docs/?path=/story/examples-area--clear-selected-highlighted-area

If you are using a controlled way then

You need to remove preFillColor from all objects those are used in a state.

[nicfornicola]

The button in the example clears all when pressed, but can I use the onLoad callback to call the const handleClear function,

Here is my MapperContainer.jsx with how I am trying to use handleClear

import React, { Fragment, useRef } from 'react';
import ImageMapper from 'react-img-mapper';
import '../styles/App.css';

const MapperContainer = ({ data, image, width, height }) => {
    const myRef = useRef(null);

    const MAP = {
        name: "my-map",
        areas: data
    };

    const handleClear = () => {
        myRef.current.clearHighlightedArea();
        console.log("cleared")
    };

    return (
        <Fragment>
            <ImageMapper
                containerRef={myRef}
                src={image}
                map={MAP}
                width={width}
                height={height}
                responsive={true}
                parentWidth={width}
                onLoad={handleClear}
            />
        </Fragment>
    );
};

export default MapperContainer;

[nicfornicola]

hm, it looks like this solution is working and calls the function but the areas are still highlighted when I press the back button on my phone. It looks like the image in the initial question. any ideas?

[NishargShah]

Can you provide me the problem in codesandbox so I can review it and help you

[nicfornicola]

https://codesandbox.io/s/proud-https-nw41yr?file=/src/index.js
This is the best I can replicate the issue, the sandbox is displaying inconsistent behavior with the highlight areas so you may have to refresh to see the onhover highlight box at the top of the image

Although it doesnt work all the time in the sandbox, when it does work, its fine on my computer browsers, but my phone browser does not clear the highlight when I hit the back button
https://jeremyelliot.herokuapp.com/
Here is the live version where you can see the error happening if you open it on your phone

Any tips are appreciated