Fix VoiceSearch TypeError in Firefox#1249
Conversation
|
|
|
Someone is attempting to deploy a commit to the icecream's projects Team on Vercel. A member of the Team first needs to authorize it. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Incredible work, @Ayushi227! 🚀
🔥 Welcome to DevDisplay — A space where developers and all the tech enthusiasts can connect, collaborate, code, create, and conquer in the tech ecosystem.
At DevDisplay, we don't just welcome contributors—we celebrate them! 🎊 Because here, your ideas matter. Your code matters. You matter. 🚀
💡 This isn't just about adding your profile. It's about making an impact, showcasing your skills, and standing out in the developer ecosystem.
Think of DevDisplay as your own project, not just another open-source contribution. We're not just a platform—we're a global movement redefining the tech space. Our vision is to be the go-to platform for developers and tech enthusiasts worldwide.
🚀 Innovation has no limits!
We encourage you to think beyond the ordinary. Got a revolutionary idea? Spot a gap in the tech world? DevDisplay can be the solution! We want contributors like you to dream big, build bold, and bring game-changing features to life.
🌍 DevDisplay is more than an open-source project. It's a global tech hub, a thriving community, and a platform where you can connect, collaborate, code, create, and conquer.
🔥 Keep pushing boundaries—we're just getting started!
If you put your 💯 into creating something exceptional, you could even join our Global Core Team and also you can lead DevDisplay as a Community Leader in your area, college, or university.
💡 Your issue is now in review!
- Our maintainers will soon review your PR and provide feedback/suggestions. 🚀 Stay tuned, stay engaged, and get ready to bring your ideas to life! 💡
---
📢 Have ideas to improve DevDisplay? Let us know! We're always looking for innovative minds to shape the future of tech.
💬 Join the conversation. Grow with the community. You belong here. 🙌
- 🚀 Join DevDisplay GitHub DevDisplay Discussions: DevDisplay Discussions
📢 Join Our Global Developer Communities & Connect with Innovators:
- 🚀 Join DevDisplay Discord Community: Discord Community
📩 Need Help? Reach Out to the Team:
- 📧 Organization Email: team@devdisplay.org
💻 Follow DevDisplay on Social Media & Stay Updated:
- GitHub Organization: DevDisplay GitHub
- LinkedIn: DevDisplay LinkedIn
- Twitter (X): DevDisplay Twitter
- Instagram: DevDisplay Instagram
🔥 🌟 Thank You for Being Here!
📝 WalkthroughWalkthroughThe VoiceSearch component was refactored to improve React lifecycle management by moving SpeechRecognition initialization from module scope into a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Search/VoiceSearch.jsx`:
- Around line 73-78: The dismiss button in VoiceSearch.jsx uses an onClick that
calls setShowNotification(false) but lacks an explicit button type and
accessible name; update the <button> that calls setShowNotification to include
type="button" to prevent accidental form submits and add an accessible label
(e.g., aria-label="Dismiss notification" or a visually hidden text node) so
screen readers can announce its purpose, keeping the current onClick handler
unchanged.
- Around line 52-64: The useEffect early-return when recognitionRef.current is
falsy or isFirefox leaves isListening potentially stale; update the effect (the
one referencing recognitionRef, isListening, isFirefox) so that when recognition
is unavailable (recognitionRef.current is falsy) or isFirefox is true you
explicitly reset the isListening state (call the setter passed from props or
local setIsListening) to false before returning, ensuring component state
reflects the actual recognition availability instead of silently exiting; keep
the try/catch path for start/stop logic unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e86eea87-d34f-4369-a7b1-53b10f806463
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
src/components/Search/VoiceSearch.jsx
| useEffect(() => { | ||
| if (!recognitionRef.current || isFirefox) return; | ||
|
|
||
| try { | ||
| if (isListening) { | ||
| recognitionRef.current.start(); | ||
| } else { | ||
| recognitionRef.current.stop(); | ||
| } | ||
| } catch (err) { | ||
| console.error('Failed to control recognition:', err); | ||
| } | ||
| }, [isListening, isFirefox]); |
There was a problem hiding this comment.
Reset isListening when recognition is unavailable.
At Line 53, Firefox exits early without reconciling isListening. If parent code sets it to true, state can remain out-of-sync with actual recognition state.
Proposed fix
useEffect(() => {
- if (!recognitionRef.current || isFirefox) return;
+ if (isFirefox || !recognitionRef.current) {
+ if (isListening) {
+ setShowNotification(true);
+ setIsListening(false);
+ }
+ return;
+ }
try {
if (isListening) {
recognitionRef.current.start();
} else {
recognitionRef.current.stop();
}
} catch (err) {
console.error('Failed to control recognition:', err);
}
-}, [isListening, isFirefox]);
+}, [isListening, isFirefox, setIsListening]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| if (!recognitionRef.current || isFirefox) return; | |
| try { | |
| if (isListening) { | |
| recognitionRef.current.start(); | |
| } else { | |
| recognitionRef.current.stop(); | |
| } | |
| } catch (err) { | |
| console.error('Failed to control recognition:', err); | |
| } | |
| }, [isListening, isFirefox]); | |
| useEffect(() => { | |
| if (isFirefox || !recognitionRef.current) { | |
| if (isListening) { | |
| setShowNotification(true); | |
| setIsListening(false); | |
| } | |
| return; | |
| } | |
| try { | |
| if (isListening) { | |
| recognitionRef.current.start(); | |
| } else { | |
| recognitionRef.current.stop(); | |
| } | |
| } catch (err) { | |
| console.error('Failed to control recognition:', err); | |
| } | |
| }, [isListening, isFirefox, setIsListening]); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Search/VoiceSearch.jsx` around lines 52 - 64, The useEffect
early-return when recognitionRef.current is falsy or isFirefox leaves
isListening potentially stale; update the effect (the one referencing
recognitionRef, isListening, isFirefox) so that when recognition is unavailable
(recognitionRef.current is falsy) or isFirefox is true you explicitly reset the
isListening state (call the setter passed from props or local setIsListening) to
false before returning, ensuring component state reflects the actual recognition
availability instead of silently exiting; keep the try/catch path for start/stop
logic unchanged.
| <button | ||
| onClick={() => setShowNotification(false)} | ||
| className="text-yellow-800 hover:text-yellow-900 dark:text-yellow-200" | ||
| > | ||
| ✕ | ||
| </button> |
There was a problem hiding this comment.
Make the dismiss button safe and accessible.
The new close button should explicitly use type="button" (to avoid accidental form submit) and include an accessible name.
Proposed fix
<button
+ type="button"
+ aria-label="Dismiss speech recognition browser support notice"
onClick={() => setShowNotification(false)}
className="text-yellow-800 hover:text-yellow-900 dark:text-yellow-200"
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button | |
| onClick={() => setShowNotification(false)} | |
| className="text-yellow-800 hover:text-yellow-900 dark:text-yellow-200" | |
| > | |
| ✕ | |
| </button> | |
| <button | |
| type="button" | |
| aria-label="Dismiss speech recognition browser support notice" | |
| onClick={() => setShowNotification(false)} | |
| className="text-yellow-800 hover:text-yellow-900 dark:text-yellow-200" | |
| > | |
| ✕ | |
| </button> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Search/VoiceSearch.jsx` around lines 73 - 78, The dismiss
button in VoiceSearch.jsx uses an onClick that calls setShowNotification(false)
but lacks an explicit button type and accessible name; update the <button> that
calls setShowNotification to include type="button" to prevent accidental form
submits and add an accessible label (e.g., aria-label="Dismiss notification" or
a visually hidden text node) so screen readers can announce its purpose, keeping
the current onClick handler unchanged.
|
Hi there! This issue is still open. We are looking forward to your response. |
1 participant
Description
Added a check for browser. As the speech recognition implemented does not function on firefox browser, the program throws an error -
Related Issues
[Bug]: Website not working on Firefox - #1234
Changes Proposed
The change I am proposing is to add a small display message to the user stating that speech recognition is not supported in firefox, and bypass the use of speech recognition on firefox. The rest of the page functions as is.
![Uploading Screenshot 2026-04-16 at 2.58.20 PM.png…]()
Checklist
Screenshots
Note to reviewers
Summary by CodeRabbit