Disabling Button Focus

[Commando-Brando]

Hey everyone I would like to disabled buttons being focused on tablet & mobile size screens.

From the old forum I found a answer to a similar question that said apply the following class:

// Small devices (landscape phones, 576px and up)
@media (min-width: 0px) and (max-width: 576px) {
    .p-button:focus {
        box-shadow: unset;
    }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 576px) and (max-width: 992px) {
    .p-button:focus {
        box-shadow: unset;
    }
}

The issue is that for some reason it only applies to normal buttons but if I try to use a button with a severity of danger then the class will not take effect on that button.

I tried adding the following style as well:

.p-button-danger:focus {
        box-shadow: unset;
    }

But that did not make any effect.

import { useRef } from "react";
import { InputText } from "primereact/inputtext";
import { Button } from "primereact/button";

interface Props {
	searchTerm: string;
	handleSearch: (searchTerm: string) => void;
	placeholder: string;
	onReset?: () => void; // Optional onReset callback property for reset button
	toolTipText?: string; // Optional tool tip text
}

/**
 * A FormSearchBar component for searching with optional reset functionality and tooltip.
 *
 * @param {string} searchTerm - The initial search term value
 * @param {(searchTerm: string) => void} handleSearch - The callback to handle search submissions
 * @param {string} placeholder - The placeholder text for the input field
 * @param {() => void} [onReset] - An optional callback to handle resetting the search field
 * @param {string} [toolTipText] - An optional tool tip text
 */
const FormSearchBar: React.FC<Props> = ({
	searchTerm,
	handleSearch,
	placeholder,
	onReset,
	toolTipText,
}: Props) => {
	const inputRef = useRef<HTMLInputElement>(null);

	return (
		<form
			onSubmit={(event) => {
				event.preventDefault();
				if (inputRef.current) handleSearch(inputRef.current.value);
			}}
		>
			<div className="p-inputgroup flex-1">
				{toolTipText ? (
					<InputText
						placeholder={placeholder}
						ref={inputRef}
						tooltip={toolTipText}
						tooltipOptions={{ position: "bottom" }}
					/>
				) : (
					<InputText placeholder={placeholder} ref={inputRef} />
				)}

				<Button label="Search" value={searchTerm} type="submit" />

				{onReset && (
					<Button
						label="Reset"
						severity="danger"
						onClick={onReset}
						type="button"
					/>
				)}
			</div>
		</form>
	);
};

export default FormSearchBar;

Above is my react code that I am applying these changes to.

[yigitfindikli]

Hi @Commando-Brando,

You can use it like this:

`@media (min-width: 0px) and (max-width: 576px) {
.p-button {
box-shadow: unset;
}
}

@media (min-width: 576px) and (max-width: 992px) {
.p-button {
box-shadow: unset;
}
}`

Stackblitz example: https://stackblitz.com/edit/react-7ruszd?file=src%2Fstyle.css

[Commando-Brando]

Thanks that clears it up!