0

Here is the description about web part:

Both web parts are same and only one ,only changed the heading and labels and their input's ID through property pane.

One Webpart is working fine on a page ,but when uploading multiple webpart getting issues.

But on the click of first webpart input fields , getting the value on the second Webpart.

Selecting Different Input id for both webpart through propertyPane.

enter image description here

Here is the property pane of my webpart which is same for both webpart but selected different value for property pane of both webpart.

Getting Folders on the basis of DocumentLibrary selected in the property pane as well as documentType's value is also getting from property pane.

I am getting value of folder as well as documentType on the double click on the folder's input as well as documentType input respectively.

enter image description here

Improve this question
7
  • Are you performing any DOM manipulation operations in your web part, based on id/class of HTML elements? If yes, you should have unique id for all HTML elements. Commented May 7, 2021 at 4:20
  • Yes i was performing DOM manipulation operations on the basis of ID and all the ID are unique as they are selected through Property Pane but dont know why i getting value on another webpart when performing onclick event on first webpart Commented May 7, 2021 at 12:01
  • Maybe HTML elements in both the web parts has same IDs. Those are separated web parts, but at the end both are on same page/DOM. so, those are not unique at DOM level. Commented May 7, 2021 at 12:17
  • So , is there any way to use both webpart on the same page without any conflicts Commented May 7, 2021 at 13:08
  • Are using react web part or no JS web part? Avoid DOM manipulations using IDs or if you are using react, handle data show/hide based on react "state". Commented May 7, 2021 at 13:56

1 Answer 1

Reset to default
1

This kind of behavior happens when you perform DOM manipulation in your web part like using ID or class of HTML element and change its attributes to show/hide the controls or to display the data in your web part.

As you are using React, you can use your TSX component to render the data in place, without DOM manipulation. You can also store your results in your component's state and call this.setState() to update your elements when you update the state. You can also use the React ref attribute to create a reference to an element and set it's value later.

If you must use DOM manipulation, consider using an approach that will make your element IDs unique.

Reference: Adding same webpart with different configuration, multiple times on the same page

You can also refer to the SPFx samples created by community members using react to learn how you can use react with SPFx web parts: SPFx web part samples

Improve this answer
1
  • Hi Abhishek, does this answer help you in any way? If yes, please Upvote(^) and accept as an Answer as it helped you & it will help others with similar question in future to find the correct answer easily. It also removes this question from "Unanswered questions" list. Commented Aug 19, 2022 at 13:12

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.