img-mapper/react-img-mapper

Disable (True) removes the preFillColor of that disabled area if I click on other areas.

Closed this issue · 8 comments

Describe the bug
This is about the new disable feature for each individual area. When I change one area dynamically with Firebase, the other areas become unclickable.

To Reproduce
Steps to reproduce the behavior:
I currently have a button <button onClick={handleClick}> Click me </button> then in my handleClick I would have

firebase
			.database()
			.ref('...')
			.orderByChild('available')
			.equalTo('soldout')
			.on('value', (snapshot) => {
				snapshot.forEach((lot) => {
					var child = firebase
						.database()
						.ref('/...')
						.child(lot.key)
						.child('mapCoords');

					child.update({
						preFillColor: 'rgba(255, 20, 20, 0.47)',
						active: false,
						disabled: true

https://user-images.githubusercontent.com/34180725/112985147-d2230b80-912d-11eb-8a75-c6824e1b12c6.mp4

, <----------
					});
				});
			});

This is supposed to disable that area clicked and leave preFillColor if I click on other area

Expected behavior
Disable area set to true while leaving the preFillColor.

Desktop (please complete the following information):

  • OS: [windows 10]
  • Browser: [chrome]
  • Version: [89.0.4389.90 ]

Please find attached video:

ezgif.com-gif-maker.2.mp4

@NishargShah While testing, I found out that there is also a weird bug where some of the other areas get the preFillColor of the area disabled. In the video you can see that the lot 6, 7, 8 etc turns into red (which is the preFillColor of lot 1). I can confirm that this is caused by the disabled = true since everything works accordingly when I remove it.

##UPDATE

This bug exists even when there is no disabled object. When I set an area with a defined preFillColor, the color disappears when I click on other areas.

Please find video:

ezgif.com-gif-maker.3.mp4

Last week is very roughed, I didn't give attention to this project

Are you using the inbuilt stayHighlighted feature?

@NishargShah No worries at all. Yes I am using the stayHighlted = true feature.

I found one issue in stayHighlighted, please check in stayMultiHighlighted, did you get the same result as stayHighlighted or get the desire result?

@NishargShah I just tested it with stayMultiHighlighted and I can confirm that it does not get the same result as stayHighlted . It happens only on stayHighlighted

Ok got it, I fixed it

Please upgrade your version to v1.1.3

Thanks

Thank you. Appreciate your work!