I can't seem to figure how to solve this problem that if you click a react-bootstrap button with a fontawesome icon as a child, the onclick target value will be undefined.
But if you click just outside the text with the icon and still inside the button, the onclick handler will still work.
https://jsfiddle.net/utmcykcg/5/
The issue seems to be that event.target can change depending on where in the button you click. Using event.currentTarget instead should give you the results you're looking for.
onClick(e) {
const btnValue = e.currentTarget.value
alert(btnValue);
}
See also: What is the exact difference between currentTarget property and target property in javascript
Related
I have .js file called Edit which is used for edit purpose. I have another .js file called Add. I have a dialog box in edit.js which will open when I click a button. But I don't want to use a button instead I want to get that a dialog box when I click anywhere on box. I tried using onclick in div tag but I didn't get any response.
this is the output
so if you observe we got a edit button there if click it I am getting form/dialog box for editing the content. but I want that form or dialog box to open when I click anywhere on the yellow box.
<div id='color' className='div2' key={item.id} style={{width: 340,
# border: '5px solid white',textIndent:-30,paddingRight:32,paddingLeft:40,whiteSpace:'pre',paddingTop:15, backgroundColor:item.currentColor}} onClick={()=>{editpage(item.id)}} >
this is what I used for calling function for getting form in another .js file. It is part of a mapping function.` there is a onclick event I used that whenever I click on the box or content which is all under div tag I need to go to that function and there go to edit and then form but it didn't work
the function to which it goes is this:
const editpage=(id)=>{ <Edit id={id}></Edit> }
I want to send a id as a parameter which is passed to Edit.js.
I used <Edit/> because it is a another js file which I am importing in Add.js file.
I am not able to get the output can you please me with this.
how I can use this when I click on color box should open a form which is indeed in another file.
This is successfully calling a function on the click event:
onClick={()=>{editpage(item.id)}}
But what does that function do? Absolutely nothing:
const editpage=(id)=>{ <Edit id={id}></Edit> }
The function doesn't return anything (not that returning from a click handler does anything either of course), doesn't perform any operations, nothing. It's just a single JSX expression.
Take a different approach entirely. Add your component to the markup, but wrap it in a condition based on state. For example, consider this state value:
const [openEditPage, setOpenEditPage] = useState();
The purpose of this state value is to keep track of which item.id should currently have its "edit" component visible. (Default to undefined so none are visible by default.)
Use this value when rendering the components:
<div id='color' className='div2' key={item.id} style={/*...*/} onClick={()=>{editpage(item.id)}}>
{openEditPage === item.id ? <Edit id={item.id}></Edit> : null}
</div>
So in this case the <Edit> component will only be rendered if openEditPage === item.id. Which is what the editpage() function can do:
const editpage = id => setOpenEditPage(id);
Clicking on the <div> would invoke the editpage function, which updates the state value, which triggers a re-render, and in the new render the <Edit> component is shown because the condition would be true.
The attached graphic shows my issue. If I click outside of the content, but inside the textarea, which you can see a light grey border around, the onBlur event is fired.
I've tried to capture the event and prevent this behaviour using target, but the event looks the same if you click way outside the box - where I want onBlur to fire.
So far using a ref has not worked either. I was hoping that would be the solution. Any ideas on how to allow a user to click anywhere within what they are seeing as the component react-draft-wysiwyg and NOT fire onBlur?
My fix, though feeling a bit hacky because of needing to handle the first onClickAway, was to elevate the onBlur call to a ClickAwayListener wrapping the Editor component like so:
<ClickAwayListener onClickAway={() => {
// Moving onBlur up to support clicking anywhere in component w/o blurring.
// Handle onClickAway firing once on focus of editor textarea.
if (firstClick) {
setFirstClick(false);
} else {
onBlur();
}
}}
>
<Editor
// do not use here: onBlur={onBlur}
// other props
/>
</ClickAwayListener>
I'm using react testing library to test my component built with FluentUI.
Here is link:
https://codesandbox.io/s/keen-borg-2tqmj?file=/src/App.spec.js
The code is basically a pasted snippet of the example code of Dialog component from FluentUI docs site. The behavior that I'm testing is:
User opens the dialog
User clicks outside of the dialog
onDimiss prop of the component should be fired.
It works when I'm playing with it manually however it seems that I failed to simulate a click outside of the component with testing library.
I tried using userEvent.click(document.body) as mentioned in this post but got no luck
Does anyone has any idea how to make test work?
It is not working because the Dialog component is not listening for the onClick event on the body, so what you need to do in this case is to find the actual element that is being clicked, observing the dom you'll find that the overlay is a div with some overlay classes on it.
<div
class="ms-Modal is-open ms-Dialog root-94"
role="document"
>
<div
aria-hidden="true"
class="ms-Overlay ms-Overlay--dark root-99"
/>
The problem now is to find a way to select it. Unfortunately, you cannot select elements in RTL by their className, so you need to use another selector; in this case, we can get the parent element by the role and then access the first child.
const onDismiss = jest.fn();
const { getByRole } = render(<App onDismiss={onDismiss} />);
UserEvent.click(screen.getByText("Open Dialog"));
const document = getByRole("document");
UserEvent.click(document.firstChild);
expect(onDismiss).toHaveBeenCalled();
https://codesandbox.io/s/hungry-joliot-tjcph?file=/src/App.spec.js
I am using a fontAwesome icon on a button and it seems that sometimes my code correctly uses the value of the button element and sometimes looks for the value of the icon (i tag element) when the button is clicked. the following combination:
<button id="break-decrement"
value="-"
onClick={this.handleBreakTime}> <i class="fas fa-angle-double-down"></i>
</button>
handleBreakTime() {
let length = this.state.breakLen;
let value = event.target.value;
console.log(value);
console.log(event.target.value);
console.log(event.currentTarget.value);
}
logs this to the console when I don't click the icon:
"-"
"-"
undefined
but logs this when I do click the icon:
undefined
undefined
undefined
Is there a way to consistently get the value of the button when the icon is clicked on.
You have to pass event as parameter in the handleBreakTime function.
Please have a look on this solution: CodeSandbox example
Note: I have used functional based component just for simplicity. It'll work for both. Happy coding :)
Try this.
button > * {
pointer-events: none;
}
I'm trying to improve accessibility on a react native app and am facing the following problem: when the user opens the menu drawer, the focus doesn't change to the modal drawer content. Instead swiping left and right focuses content that's in the background.
I have tried setting dynamic accessibility props to the drawer and main content area:
<NavigationMenu
importantForAccessibility={isNavigationVisible ? 'yes' : 'no-hide-descendants'}
/>
<DashboardContent
importantForAccessibility={isNavigationVisible ? 'no-hide-descendants' : 'yes'}
/>
Where isNavigationVisible is a prop that gets updated when the drawer opens, but this had no effect.
Is there any way to force the focus change to the drawer when it opens?
This is what i ended up using:
const setFocus = ({ current: ref }) => {
const FOCUS_ON_VIEW = 8;
const reactTag = findNodeHandle(ref);
Platform.OS === 'android'
? UIManager.sendAccessibilityEvent(reactTag, FOCUS_ON_VIEW)
: AccessibilityInfo.setAccessibilityFocus(reactTag);
}
Currently, React-Native doesn't provide a way, to out-of-the-box, traverse the view tree and get the first focusable element to set the focus for it.
So you need to use AccessibilityInfo.setAccessibilityFocus passing a reactTag case by case.
Looks like there is a bug on AccessibilityInfo.setAccessibilityFocus(reactTag), it doesn't work consistently and calling it more than once increase the chance of success.
See this answer for how to make this call twice to do the focus on view launch.
See this open issue on github for more detail.